Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AutoHide Progressbar with StyleTriggers

I would like to hide a progressbar in WPF using databinding. Whenever a property is 0, the progressbar should hide: I try the following code

(Info: My current datacontext is a class that holds an integer property 'CurrentIndex')

<ProgressBar Minimum="0" Maximum="100" Value="{Binding CurrentIndex, UpdateSourceTrigger=PropertyChanged}" Visibility="Visible">
    <ProgressBar.Style>
        <Style TargetType="{x:Type ProgressBar}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding CurrentIndex}" Value="0">
                    <Setter Property="Visibility" Value="Hidden"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ProgressBar.Style>
</ProgressBar>

What is wrong with this code? Why does the progressbar still show up when the CurrentIndex is 0? (in the model behind, the value of 'CurrentIndex' is 0 by default, when the control is loaded)

like image 641
shaft Avatar asked May 28 '26 20:05

shaft


2 Answers

DP precedence, do not set Visibility on the control itself (local value > style).

like image 68
H.B. Avatar answered Jun 01 '26 02:06

H.B.


Your XAML was almost right!

Define your progressbar as you did:

<ProgressBar Minimum="0" 
             Maximum="100" 
             Value="{Binding CurrentIndex, UpdateSourceTrigger=PropertyChanged}"
             Name="MyAutoHidingProgressBar" />

Don't forget to add the Name property AND do not set the Visibility here. It will always override what is set in your Style.

Then define a Style as normal in your <Window.Resources>

 <Window.Resources>
    <Style TargetType="ProgressBar" x:Key="MyAutoHidingProgressBarStyle">
       <Style.Triggers>
           <DataTrigger Binding="{Binding ElementName=MyAutoHidingProgressBar, Path=Value}" Value="0">
                <Setter Property="Visibility" Value="Hidden"></Setter>
           </DataTrigger>
       </Style.Triggers>
    </Style>
</Window.Resources>

What this is basically doing is to check the Value of the progressbar itself, rather than your binding.

As a last step add the Style to your progressbar:

Style="{StaticResource MyAutoHidingProgressBarStyle}"

Now your ProgressBar will auto hide if its Value is 0. You can also easily add a Trigger to hide it if its full.

like image 41
Felix D. Avatar answered Jun 01 '26 04:06

Felix D.



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!