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

时间:2016-02-06 17:32:19

标签: c# wpf mvvm

我第一次使用MVVM而且我没有使用任何框架。 我有一个视图,它有一个stackpanel,stackpanel有子按钮。 我想单击该按钮并隐藏stackpanel及其所有子项。我正在使用

InteractionTriggers ,但这对我没有帮助!请检查并协助我做错的地方

  

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>

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

2 个答案:

答案 0 :(得分:0)

我不认为在这里使用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接口,因此将通知用户界面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));
    }
}

答案 1 :(得分:0)

我们将使用Animation使用以下方法将Visibility的{​​{1}}设置为StackPanel

在ViewModel中定义一个静态字段。

Collapsed

标记

  

的xmlns:本地=&#34; CLR-名称空间:myNameSpace对象&#34;

    public static Visibility Collapsed = Visibility.Collapsed;