การผูกการมองเห็นของปุ่มกับค่าบูลใน ViewModel

ฉันจะผูกการมองเห็นของปุ่มกับค่าบูลใน ViewModel ของฉันได้อย่างไร

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

สมมติว่าAdvancedFormatเป็นboolคุณต้องประกาศและใช้ a 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}}"/>

Converter={StaticResource BoolToVis}หมายเหตุเพิ่ม

นี่เป็นรูปแบบที่พบบ่อยมากเมื่อทำงานกับ MVVM ในทางทฤษฎีคุณสามารถทำการแปลงด้วยตัวคุณเองในคุณสมบัติ ViewModel (เช่นเพียงแค่สร้างคุณสมบัติให้เป็นประเภทVisibility) แม้ว่าฉันจะไม่ต้องการทำเช่นนั้นเนื่องจากตอนนี้คุณกำลังยุ่งกับการแยกความกังวล ความสามารถในการมองเห็นของรายการควรขึ้นอยู่กับ View

มีวิธีที่สามที่ไม่ต้องใช้ตัวแปลงหรือเปลี่ยนโมเดลมุมมองของคุณ: ใช้สไตล์:

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

ฉันมักจะชอบเทคนิคนี้เพราะฉันใช้มันในหลาย ๆ กรณีที่สิ่งที่ฉันผูกไว้ไม่ใช่บูลีนเช่นการแสดงองค์ประกอบเฉพาะในกรณีที่มันDataContextไม่เป็นโมฆะหรือใช้การแสดงผลแบบหลายสถานะโดยที่รูปแบบต่างๆจะปรากฏขึ้นตาม การตั้งค่า enum ในโมเดลมุมมอง

การแปลง 2 ทางใน c # จากบูลีนเป็นการมองเห็น

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

โดยทั่วไปมีสองวิธีในการทำคลาสตัวแปลงหรือคุณสมบัติใน Viewmodel ที่แปลงค่าให้คุณเป็นหลัก

ฉันมักจะใช้วิธีการคุณสมบัติหากเป็นการปิดการแปลง หากคุณต้องการใช้ซ้ำให้ใช้ตัวแปลง ด้านล่างนี้ค้นหาตัวอย่างของตัวแปลง:

<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

วิธีคุณสมบัติ ViewModel จะตรวจสอบค่าคุณสมบัติบูลีนและส่งคืนการมองเห็นตามนั้น อย่าลืมใช้ INotifyPropertyChanged และเรียกใช้ทั้งบนคุณสมบัติบูลีนและการมองเห็นเพื่ออัปเดตอย่างถูกต้อง

ซึ่งสามารถทำได้ด้วยวิธีง่ายๆ 1. เขียนสิ่งนี้ในมุมมอง

<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. ต่อไปนี้เป็นคุณสมบัติบูลีนซึ่งเก็บค่าจริง / เท็จ ต่อไปนี้เป็นข้อมูลโค้ด ในตัวอย่างของฉันคุณสมบัตินี้อยู่ในคลาส UserNote

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

3. นี่คือวิธีที่คุณสมบัติIsHideได้รับค่า

   userNote.IsHide = userNote.IsNoteDeleted;

ในมุมมอง:

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

ในมุมมองโมเดล:

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

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

คุณจะต้องมีเหตุการณ์เปลี่ยนแปลงคุณสมบัติ

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

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

นี่คือวิธีที่พวกเขาใช้ Model-view-viewmodel

แต่เนื่องจากคุณต้องการให้มันเชื่อมโยงกับบูลีนคุณจึงต้องมีตัวแปลง อีกวิธีหนึ่งคือการตั้งค่าบูลีนภายนอกและเมื่อคลิกปุ่มนั้นแล้วให้ตั้งค่า property_advancedFormat เป็นระดับการมองเห็นที่คุณต้องการ

ตั้งแต่ Windows 10 15063 ขึ้นไป

ตั้งแต่ Windows 10 build 15063 มีคุณลักษณะใหม่ที่เรียกว่า "Implicit Visibility conversion" ที่ผูกการมองเห็นเข้ากับค่าบูลโดยกำเนิด - ไม่จำเป็นต้องใช้ตัวแปลงอีกต่อไป

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

รหัสของฉัน (ซึ่งสมมติว่ามีการใช้ MVVM และเทมเพลต 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(); }
}