Ràng buộc khả năng hiển thị của Nút với giá trị bool trong ViewModel

Làm cách nào để liên kết khả năng hiển thị của nút với giá trị bool trong ViewModel của tôi?

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

Giả sử AdvancedFormatlà a bool, bạn cần khai báo và sử dụng 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}}"/>

Lưu ý đã thêm Converter={StaticResource BoolToVis} .

Đây là một mẫu rất phổ biến khi làm việc với MVVM. Về lý thuyết, bạn có thể tự mình thực hiện chuyển đổi trên thuộc tính ViewModel (tức là chỉ tạo thuộc tính của chính nó Visibility) mặc dù tôi không muốn làm điều đó, vì bây giờ bạn đang lộn xộn với việc tách các mối quan tâm. Khả năng hiển thị của một mục thực sự phải tùy thuộc vào Chế độ xem.

Có một cách thứ ba không yêu cầu bộ chuyển đổi hoặc thay đổi đối với mô hình chế độ xem của bạn: sử dụng kiểu:

<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>

Tôi có xu hướng thích kỹ thuật này hơn bởi vì tôi sử dụng nó trong nhiều trường hợp mà những gì tôi đang ràng buộc không phải là boolean - ví dụ: chỉ hiển thị một phần tử nếu nó DataContextkhông phải là null hoặc triển khai hiển thị đa trạng thái trong đó các bố cục khác nhau xuất hiện dựa trên thiết lập một enum trong mô hình xem.

Chuyển đổi 2 chiều trong c # từ boolean sang khả năng hiển thị

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;
        }
    }
}

Nói chung, có hai cách để làm điều đó, một lớp chuyển đổi hoặc một thuộc tính trong Viewmodel về cơ bản chuyển đổi giá trị cho bạn.

Tôi có xu hướng sử dụng cách tiếp cận thuộc tính nếu nó là một chuyển đổi một lần. Nếu bạn muốn sử dụng lại nó, hãy sử dụng công cụ chuyển đổi. Dưới đây, hãy tìm một ví dụ về bộ chuyển đổi:

<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

Phương thức thuộc tính ViewModel sẽ chỉ kiểm tra giá trị thuộc tính boolean và trả về khả năng hiển thị dựa trên đó. Đảm bảo triển khai INotifyPropertyChanged và gọi nó trên cả thuộc tính Boolean và Visibility để cập nhật đúng cách.

Điều này có thể đạt được bằng một cách rất đơn giản 1. Viết điều này trong khung nhìn.

<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. Sau đây là thuộc tính Boolean chứa giá trị true / false. Sau đây là đoạn mã. Trong ví dụ của tôi, thuộc tính này nằm trong lớp UserNote.

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

3. Đây là cách thuộc tính IsHide nhận giá trị.

   userNote.IsHide = userNote.IsNoteDeleted;

Đang xem:

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

Trong chế độ xem Mô hình:

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

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

Bạn sẽ cần có một sự kiện thay đổi thuộc tính

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

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

Đây là cách họ sử dụng Model-view-viewmodel

Nhưng vì bạn muốn nó được liên kết với một boolean, bạn sẽ cần một số công cụ chuyển đổi. Một cách khác là đặt boolean bên ngoài và khi nút đó được nhấp vào thì đặt property_advancedFormat thành khả năng hiển thị mong muốn của bạn.

Kể từ Windows 10 15063 trở lên

Kể từ phiên bản Windows 10 build 15063, có một tính năng mới được gọi là "Chuyển đổi mức độ hiển thị ngầm" liên kết Mức độ hiển thị với giá trị bool nguyên bản - Không cần sử dụng trình chuyển đổi nữa.

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

Mã của tôi (giả sử rằng MVVM được sử dụng và cả Mẫu 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(); }
}