it-swarm-id.com

Teks di ProgressBar di WPF

Ini mungkin no-brainer untuk WPF cognoscenti, tapi saya ingin tahu apakah ada cara sederhana untuk meletakkan teks pada WPF ProgressBar. Bagi saya, bilah kemajuan kosong terlihat telanjang. Itu layar real estat yang bisa membawa pesan tentang apa sedang berlangsung, atau bahkan hanya menambahkan angka ke representasi. Sekarang, WPF adalah semua tentang wadah dan ekstensi dan saya perlahan-lahan membungkus pikiran saya di sekitar itu, tetapi karena saya tidak melihat properti "Teks" atau "Konten", saya pikir saya harus menambahkan sesuatu ke wadah itu adalah progress bar saya. Apakah ada satu atau dua teknik di luar sana yang lebih alami daripada impuls WinForms asli saya? Apa cara terbaik, paling alami WPF untuk menambahkan teks ke bilah kemajuan itu?

49
Jacob Proffitt

Jika Anda perlu memiliki metode yang dapat digunakan kembali untuk menambahkan teks, Anda dapat membuat Style/ControlTemplate baru yang memiliki TextBlock tambahan untuk menampilkan teks. Anda dapat membajak properti TextSearch.Text terlampir untuk mengatur teks pada bilah kemajuan. 

Jika tidak perlu digunakan kembali, cukup letakkan bilah progres di Kotak dan tambahkan TextBlock ke kotak. Karena WPF dapat menyusun elemen bersama-sama, ini akan bekerja dengan baik.

Jika Anda mau, Anda bisa membuat UserControl yang mengekspos ProgressBar dan TextBlock sebagai properti publik, jadi itu akan kurang bekerja daripada membuat ControlTemplate kustom.

28
Abe Heidebrecht

Kedua tanggapan sebelumnya (membuat CustomControl baru atau Adorner) adalah praktik yang lebih baik, tetapi jika Anda hanya ingin cepat dan kotor (atau untuk memahami secara visual bagaimana melakukannya) maka kode ini akan berfungsi:

<Grid Width="300" Height="50">  
   <ProgressBar Value="50" />
   <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
      My Text
   </TextBlock>
</Grid>

Hanya perlu diingat bahwa indeks-z adalah sedemikian rupa sehingga item terakhir yang terdaftar akan berada di atas.

Juga, jika Anda tidak memiliki Kaxaml belum, pastikan untuk mengambilnya - itu bagus untuk bermain dengan XAML ketika Anda mencoba untuk mencari tahu.

55
SmartyP

Ini bisa sangat sederhana (kecuali ada banyak cara untuk membuatnya bekerja).

Anda dapat menggunakan Style untuk menyelesaikan ini atau Anda hanya overlay TextBlock dan ProgressBar

Saya pribadi menggunakan ini untuk menunjukkan persentase kemajuan saat menunggu penyelesaian.

Untuk membuatnya sangat sederhana, saya hanya ingin memiliki satuBinding saja, jadi saya melampirkan TextBock.Text ke ProgressBar.Value.

Kemudian salin Kode untuk menyelesaikannya.

<Grid>
   <ProgressBar Minimum="0" 
                Maximum="100" 
                Value="{Binding InsertBindingHere}" 
                Name="pbStatus" />
   <TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}" 
           HorizontalAlignment="Center" 
           VerticalAlignment="Center" />
</Grid>

Berikut ini tampilannya:

 enter image description here

Lihat Tutorial WPF untuk posting lengkap. 

27
Felix D.

Anda dapat menggunakan Adorner untuk menampilkan teks di atasnya.

Lihat artikel MSDN tentang Penghias

Anda akan membuat kelas yang mewarisi dari kelas Adorner. Ganti metode OnRender untuk menggambar teks yang Anda inginkan. Jika mau, Anda dapat membuat properti ketergantungan untuk Adorner khusus Anda yang berisi teks yang ingin Anda tampilkan. Kemudian gunakan contoh di tautan yang saya sebutkan untuk menambahkan Adorner ini ke lapisan adorner bar kemajuan Anda.

5
Bob Wintemberg

Klik kanan ProgressBar, dan klik Edit Template> Edit Copy.

Kemudian masukkan TextBlock seperti yang ditunjukkan di bawah ini tepat di atas tag penutup Grid dalam Style yang dihasilkan oleh VS.

   <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
   <TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/>
 </Grid>
 <ControlTemplate.Triggers>
1
AnjumSKhan

ProgressBar dengan Teks dan Penjilidan dari 2 Properti (Nilai/Nilai maksimum):

<Grid>
    <ProgressBar Name="pbUsrLvl"
                 Minimum="1" 
                 Maximum="99" 
                 Value="59" 
                 Margin="5"  
                 Height="24"  Foreground="#FF62FF7F"/>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock.Text>
            <MultiBinding StringFormat="{}UserLvl:{0}/{1}">
                <Binding Path="Value" ElementName="pbUsrLvl" />
                <Binding Path="Maximum" ElementName="pbUsrLvl" />
            </MultiBinding>
        </TextBlock.Text>
    </TextBlock>
</Grid>

Rezult:

 enter image description here


Sama tetapi dengan% dari kemajuan:

<Grid>
    <ProgressBar Name="pbLifePassed"
                 Minimum="0" 
                 Value="59" 
                 Maximum="100"
                 Margin="5" Height="24" Foreground="#FF62FF7F"/>
    <TextBlock Text="{Binding ElementName=pbLifePassed, Path=Value, StringFormat={}{0:0}%}" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

 enter image description here

0
Andrew