使用 MVVM 单击按钮时隐藏/显示堆栈面板

本文关键字：显示 堆栈 隐藏 MVVM 单击 按钮 使用 | 更新日期: 2023-09-27 18:33:33

我是第一次使用 MVVM，我没有为此使用任何框架。我有一个视图，它有一个堆栈面板，并且该堆栈面板有一个带按钮的子项。我想单击该按钮并隐藏堆栈面板及其所有子项。我正在使用

互动触发器，但这对我没有帮助！ 请检查并协助我做错的地方

View.XAML

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Hidden" Margin="0,5,0,0" 
              Grid.Row="1">
    <StackPanel x:Name="MenuAppMemTopApps1" Height="485" Width="534">
        <StackPanel Height="80.667" Margin="1.767,0,0,0" 
                    Visibility="{Binding TopAppsTwitterCommand,Converter={StaticResource Bool2Visible}}">
            <TextBlock Margin="129.249,6,24,0" TextWrapping="Wrap" 
                       FontSize="17.333" Foreground="#FF8FA3AD" Text="7%" 
                       Height="28.408" RenderTransformOrigin="0.458,0.526" 
                       HorizontalAlignment="Right" Width="32.751"/>
            <TextBlock TextWrapping="Wrap" FontSize="20" Foreground="White" 
                       Text="Angry Birds" Height="28.408" Width="134.499" 
                       HorizontalAlignment="Left" Margin="62,-29,0,3"/>
            <Button x:Name="btnRestartWiFi1_Copy19" Content="Repair Now" 
                    Height="32" Width="118" Background="#FFCED7DB" 
                    FontSize="13.333" Margin="24,6,0,0" HorizontalAlignment="Left">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <i:InvokeCommandAction Command="{Binding repairAppsUsingBatteryCommand}"></i:InvokeCommandAction>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            <Image x:Name="image18" HorizontalAlignment="Left" Height="24" 
                   Margin="24,-109,0,0" Width="24" 
                   Source="/WindowsDeviceAssist;component/Images/Angry-Birds-Logo.png"/>
        </StackPanel>

虚拟机

.CS 
public VM() 
{ 
    this.repairAppsUsingBatteryCommand = new RelayCommand(this.ExecuterepairAppsUsingBatteryCommand);
}
private void ExecuterepairAppsUsingBatteryCommand(object obj)
{
    this.TopAppsTwitterCommand = false;
}  
public ICommand repairAppsUsingBatteryCommand { get; set; }
private bool topAppsTwitterCommand;
public bool TopAppsTwitterCommand
{
    get { return this.topAppsTwitterCommand; }
    set { this.healthTabCommand = true; }
}

使用 MVVM 单击按钮时隐藏/显示堆栈面板

我认为

在这里使用EventTrigger没有多大价值。

你可以这样做：

<Button x:Name="btnRestartWiFi1_Copy19" 
        Content="Repair Now" Height="32" 
        Width="118" Background="#FFCED7DB" 
        FontSize="13.333" Margin="24,6,0,0" 
        HorizontalAlignment="Left"
        Command="{Binding repairAppsUsingBatteryCommand}" />

此外，您的VM类应实现INotifyPropertyChanged接口，因此 UI 将收到有关TopAppsTwitterCommand属性更改的通知。

public class VM : INotifyPropertyChanged

和属性：

private bool _topAppsTwitterCommand;
public bool TopAppsTwitterCommand
{
    get { return this._topAppsTwitterCommand; }
    set
    {
         this._topAppsTwitterCommand = value;
         OnPropertyChanged("TopAppsTwitterCommand");
    }
}

出于某种原因，您this.healthTabCommand = true;了。

INotifyPropertyChanged实现的其余部分：

public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    if (PropertyChanged != null)
    {
        PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

我们将使用以下方法使用 Animation 将StackPanel的Visibility设置为Collapsed。

在视图模型中定义静态字段。

    public static Visibility Collapsed = Visibility.Collapsed;

标记

xmlns：local="clr-namespace：Mynamespace"

  <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Hidden" Margin="0,5,0,0" Grid.Row="1">
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="btnRestartWiFi1_Copy19">
            <BeginStoryboard>
                <Storyboard>
                    <!--<DoubleAnimation Storyboard.TargetName="Stk1" Storyboard.TargetProperty="Opacity" To="0"/>-->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                        <ObjectAnimationUsingKeyFrames.KeyFrames>
                            <DiscreteObjectKeyFrame Value="{x:Static local:ViewModel.Collapsed}">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames.KeyFrames>
                    </ObjectAnimationUsingKeyFrames>                            
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
   <StackPanel x:Name="MenuAppMemTopApps1" Height="485" Width="534">
   ...
相关文章：