Binding a Button s visibility to a bool value in ViewModel

Question

How do I bind the visibility of a button to a bool value in my ViewModel    lt Button Height  50  Width  50  Style   StaticResource MyButtonStyle       Command   Binding SmallDisp   CommandParameter   Binding   Cursor  Hand      Visibility   Binding Path AdvancedFormat     gt

User · Answer

In View    lt Button  Height  50  Width  50   Style   StaticResource MyButtonStyle    Command   Binding SmallDisp   CommandParameter   Binding    Cursor  Hand  Visibility   Binding Path AdvancedFormat    gt    In view Model   public  advancedFormat   Visibility visible  whatever you start with   public Visibility AdvancedFormat    get return  advancedFormat    set      advancedFormat   value       raise property changed here     You will need to have a property changed event   protected virtual void OnPropertyChanged PropertyChangedEventArgs e                  PropertyChanged Raise this  e                protected void OnPropertyChanged string propertyName                  OnPropertyChanged new PropertyChangedEventArgs propertyName              This is how they use Model-view-viewmodel  But since you want it binded to a boolean  You will need some converter  Another way is to set a boolean outside and when that button is clicked then set the property advancedFormat to your desired visibility

User · Answer

Generally there are two ways to do it  a converter class or a property in the Viewmodel that essentially converts the value for you   I tend to use the property approach if it is a one off conversion   If you want to reuse it  use the converter   Below  find an example of the converter    lt ValueConversion GetType Boolean   GetType Visibility   gt    Public Class BoolToVisibilityConverter     Implements IValueConverter      Public Function Convert ByVal value As Object  ByVal targetType As System Type  ByVal parameter As Object  ByVal culture As System Globalization CultureInfo  As Object Implements System Windows Data IValueConverter Convert          If value IsNot Nothing Then             If value   True Then                  Return Visibility Visible             Else                 Return Visibility Collapsed             End If         Else             Return Visibility Collapsed         End If     End Function      Public Function ConvertBack ByVal value As Object  ByVal targetType As System Type  ByVal parameter As Object  ByVal culture As System Globalization CultureInfo  As Object Implements System Windows Data IValueConverter ConvertBack         Throw New NotImplementedException     End Function End Class   A ViewModel property method would just check the boolean property value  and return a visibility based on that   Be sure to implement INotifyPropertyChanged and call it on both the Boolean and Visibility properties to updated properly

User · Answer

Since Windows 10 15063 upwards  Since Windows 10 build 15063  there is a new feature called  Implicit Visibility conversion  that binds Visibility to bool value natively - There is no need anymore to use a converter    see https   social technet microsoft com wiki contents articles 34846 uwp-compiled-binding-windows-10-anniversary-update aspx Implicit Visibility conversion    My code  which supposes that MVVM is used  and Template 10 as well     lt  -- In XAML -- gt   lt StackPanel x Name  Msg StackPanel  Visibility   x Bind ViewModel ShowInlineHelp   Orientation  Horizontal  Margin  0 24 0 0  gt       lt TextBlock Text  Frosty the snowman was a jolly happy soul  Margin  0 0 8 0   gt       lt SymbolIcon Symbol  OutlineStar    gt       lt TextBlock Text  With a corncob pipe and a button nose  Margin  8 0 0 0   gt   lt  StackPanel gt    lt  -- in companion View-Model -- gt  public bool ShowInlineHelp    using T10 SettingsService        get   return   settings ShowInlineHelp         set    settings ShowInlineHelp    value  base RaisePropertyChanged

User · Answer

This can be achieved in a very simple way 1  Write this in the view    lt Button HorizontalAlignment  Center  VerticalAlignment  Center  Width  50  Height  30  gt   lt Button Style gt           lt Style TargetType  Button  gt                   lt Setter Property  Visibility  Value  Collapsed   gt                           lt Style Triggers gt                                   lt DataTrigger Binding   Binding IsHide   Value  True  gt                                           lt Setter Property  Visibility  Value  Visible   gt                                       lt  DataTrigger gt                               lt  Style Triggers gt               lt  Style gt       lt  Button Style gt       The following is the Boolean property which holds the true  false value  The following is the code snippet  In my example this property is in UserNote class   public bool  isHide   false   public bool IsHide    get   return  isHide     set                isHide   value              OnPropertyChanged  IsHide              This is the way the IsHide property gets the value   userNote IsHide   userNote IsNoteDeleted

User · Answer

Assuming AdvancedFormat is a bool  you need to declare and use a BooleanToVisibilityConverter    lt  -- In your resources section of the XAML -- gt   lt BooleanToVisibilityConverter x Key  BoolToVis    gt    lt  -- In your Button declaration -- gt   lt Button  Height  50  Width  50   Style   StaticResource MyButtonStyle    Command   Binding SmallDisp   CommandParameter   Binding    Cursor  Hand  Visibility   Binding Path AdvancedFormat  Converter  StaticResource BoolToVis     gt    Note the added Converter  StaticResource BoolToVis    This is a very common pattern when working with MVVM  In theory you could do the conversion yourself on the ViewModel property  i e  just make the property itself of type Visibility  though I would prefer not to do that  since now you are messing with the separation of concerns  An item s visbility should really be up to the View

User · Answer

There s a third way that doesn t require a converter or a change to your view model   use a style    lt Style TargetType  Button  gt      lt Setter Property  Visibility  Value  Collapsed   gt      lt Style Triggers gt         lt DataTrigger Binding   Binding IsVisible   Value  True  gt            lt Setter Property  Visibility  Value  Visible   gt         lt  DataTrigger gt      lt  Style Triggers gt   lt  Style gt    I tend to prefer this technique because I use it in a lot of cases where what I m binding to is not boolean - e g  displaying an element only if its DataContext is not null  or implementing multi-state displays where different layouts appear based on the setting of an enum in the view model

User · Answer

2 way conversion in c  from boolean to visibility  using System  using System Windows  using System Windows Data   namespace FaceTheWall converters       class BooleanToVisibilityConverter   IValueConverter               public object Convert object value  Type targetType  object parameter  System Globalization CultureInfo culture                        if  value is Boolean  amp  amp   bool value                                return Visibility Visible                            return Visibility Collapsed                     public object ConvertBack object value  Type targetType  object parameter  System Globalization CultureInfo culture                        if  value is Visibility  amp  amp   Visibility value    Visibility Visible                                return true                            return false

[c#] Binding a Button's visibility to a bool value in ViewModel

Examples related to c#

Examples related to wpf

Examples related to xaml

Examples related to data-binding