Powiązanie widoczności Button z wartością bool w ViewModel

Jak powiązać widoczność przycisku z wartością bool w moim ViewModel?

<Button Height="50" Width="50" Style="{StaticResource MyButtonStyle}"
    Command="{Binding SmallDisp}" CommandParameter="{Binding}" Cursor="Hand"
    Visibility="{Binding Path=AdvancedFormat}" />

Zakładając, że AdvancedFormatjest bool, musisz zadeklarować i użyć BooleanToVisibilityConverter:

<!-- In your resources section of the XAML -->
<BooleanToVisibilityConverter x:Key="BoolToVis" />

<!-- In your Button declaration -->
<Button
 Height="50" Width="50"
 Style="{StaticResource MyButtonStyle}"
 Command="{Binding SmallDisp}" CommandParameter="{Binding}" 
Cursor="Hand" Visibility="{Binding Path=AdvancedFormat, Converter={StaticResource BoolToVis}}"/>

Zwróć uwagę na dodane Converter={StaticResource BoolToVis}.

Jest to bardzo powszechny wzorzec podczas pracy z MVVM. Teoretycznie można zrobić konwersję siebie na własność ViewModel (czyli po prostu zrobić właściwość samego typu Visibility), chociaż ja nie preferuje tego robić, ponieważ teraz są brudząc z separacji obawy. Widoczność elementu powinna naprawdę zależeć od widoku.

Istnieje trzeci sposób, który nie wymaga konwertera ani zmiany modelu widoku: użyj stylu:

<Style TargetType="Button">
   <Setter Property="Visibility" Value="Collapsed"/>
   <Style.Triggers>
      <DataTrigger Binding="{Binding IsVisible}" Value="True">
         <Setter Property="Visibility" Value="Visible"/>
      </DataTrigger>
   </Style.Triggers>
</Style>

Preferuję tę technikę, ponieważ używam jej w wielu przypadkach, w których to, co wiążę, nie jest logiczne - np. Wyświetlanie elementu tylko wtedy, gdy DataContextnie jest null, lub implementowanie wyświetlaczy wielostanowych, w których pojawiają się różne układy w oparciu o ustawienie wyliczenia w modelu widoku.

Dwukierunkowa konwersja w języku C # z wartości logicznej na widoczność

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 && (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 && (Visibility)value == Visibility.Visible)
            {
                return true;
            }
            return false;
        }
    }
}

Ogólnie rzecz biorąc, można to zrobić na dwa sposoby, za pomocą klasy konwertera lub właściwości w modelu Viewmodel, która zasadniczo konwertuje wartość za Ciebie.

Zwykle stosuję podejście dotyczące własności, jeśli jest to jednorazowa konwersja. Jeśli chcesz go ponownie użyć, użyj konwertera. Poniżej przykład konwertera:

<ValueConversion(GetType(Boolean), GetType(Visibility))> _
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

Metoda właściwości ViewModel po prostu sprawdzałaby wartość właściwości logicznej i na jej podstawie zwracałaby widoczność. Pamiętaj, aby zaimplementować INotifyPropertyChanged i wywołać ją we właściwościach Boolean i Visibility, aby poprawnie zaktualizować.

Można to osiągnąć w bardzo prosty sposób 1. Zapisz to w widoku.

<Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="30">
<Button.Style>
        <Style TargetType="Button">
                <Setter Property="Visibility" Value="Collapsed"/>
                        <Style.Triggers>
                                <DataTrigger Binding="{Binding IsHide}" Value="True">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                            </Style.Triggers>
            </Style>
    </Button.Style>

2. Poniżej znajduje się właściwość logiczna, która przechowuje wartość prawda / fałsz. Poniżej znajduje się fragment kodu. W moim przykładzie ta właściwość jest w klasie UserNote.

   public bool _isHide = false;
   
   public bool IsHide
   {
   
   get { return _isHide; }
   
   set
       {
           _isHide = value;
               OnPropertyChanged("IsHide");
       }
   } 

3. W ten sposób właściwość IsHide pobiera wartość.

   userNote.IsHide = userNote.IsNoteDeleted;

Z uwagi:

<Button
 Height="50" Width="50"
 Style="{StaticResource MyButtonStyle}"
 Command="{Binding SmallDisp}" CommandParameter="{Binding}" 
Cursor="Hand" Visibility="{Binding Path=AdvancedFormat}"/>

W widoku Model:

public _advancedFormat = Visibility.visible (whatever you start with)

public Visibility AdvancedFormat
{
 get{return _advancedFormat;}
 set{
   _advancedFormat = value;
   //raise property changed here
}

Będziesz musiał mieć wydarzenie zmiany właściwości

 protected virtual void OnPropertyChanged(PropertyChangedEventArgs e) 
    { 
        PropertyChanged.Raise(this, e); 
    } 

    protected void OnPropertyChanged(string propertyName) 
    { 
        OnPropertyChanged(new PropertyChangedEventArgs(propertyName)); 
    } 

W ten sposób używają modelu widoku modelu

Ale ponieważ chcesz, aby był powiązany z wartością logiczną, będziesz potrzebować konwertera. Innym sposobem jest ustawienie wartości boolowskiej na zewnątrz i po kliknięciu tego przycisku ustaw właściwość property_advancedFormat na żądaną widoczność.

Od Windows 10 15063 wzwyż

Od wersji 15063 systemu Windows 10 dostępna jest nowa funkcja o nazwie „Niejawna konwersja widoczności”, która natywnie wiąże widoczność z wartością bool - nie ma już potrzeby korzystania z konwertera.

(patrz https://social.technet.microsoft.com/wiki/contents/articles/34846.uwp-compiled-binding-windows-10-anniversary-update.aspx#Implicit_Visibility_conversion ).

Mój kod (który zakłada, że ​​używany jest MVVM, a także szablon 10):

<!-- In XAML -->
<StackPanel x:Name="Msg_StackPanel" Visibility="{x:Bind ViewModel.ShowInlineHelp}" Orientation="Horizontal" Margin="0,24,0,0">
    <TextBlock Text="Frosty the snowman was a jolly happy soul" Margin="0,0,8,0"/>
    <SymbolIcon Symbol="OutlineStar "/>
    <TextBlock Text="With a corncob pipe and a button nose" Margin="8,0,0,0"/>
</StackPanel>

<!-- in companion View-Model -->
public bool ShowInlineHelp // using T10 SettingsService
{ 
    get { return (_settings.ShowInlineHelp); }
    set { _settings.ShowInlineHelp = !value; base.RaisePropertyChanged(); }
}