C# MVVM combox控制grid隐藏切换

最新推荐文章于 2022-08-06 18:12:36 发布

weixin_30414155

最新推荐文章于 2022-08-06 18:12:36 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：http://www.cnblogs.com/shon/p/4533990.html

本文介绍了一种使用WPF实现界面切换的方法。通过DataStateBehavior结合VisualStateManager，根据ViewModel中IsShowEditView属性的不同值，动态切换显示EditView和MatchView两个不同的视图，并通过ComboBox选择状态来联动切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、添加程序集:System.Windows.Interactivity;

2、Grid Visibility属性默认设置为 Collapsed;

　　<Grid x:Name="EditView" Visibility="Collapsed"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1">
            <local:PeopleDetailEditView DataContext="{Binding PeopleDetailEditView}"/>
        </Grid>

　　<Grid x:Name="MatchView" Visibility="Collapsed"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1">
            <local:PeopleDetailMatchView DataContext="{Binding PeopleDetailMatchView}"/>
        </Grid>

3、代码实例，不能运行，需修改。

viewModel:

public bool IsShowEditView
        {
            get { return this.isShowEditView; }
            set
            {
                SetProperty(ref this.isShowEditView, value);
            }
        }

public string SelectStatus
{
get
{
this.selectStatus = this.IsShowEditView ? TCE.Client.Resources.Properties.Resources.RESSTR_People_Edit : TCE.Client.Resources.Properties.Resources.RESSTR_People_Match;
return this.selectStatus;
}

set
{
this.IsShowEditView = value == TCE.Client.Resources.Properties.Resources.RESSTR_People_Edit;
SetProperty(ref this.selectStatus, value);
}
}

xmal:

<UserControl x:Class="TCE.Client.People.Views.PeopleDetailView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
             xmlns:dui="clr-namespace:EGuard.UI.Controls;assembly=EGuard.UI"
             xmlns:local="clr-namespace:TCE.Client.People.Views"
             xmlns:Res="clr-namespace:TCE.Client.Resources.Properties;assembly=TCE.Client.Resources">
    
    <Grid>
        
        <i:Interaction.Behaviors>
            <ei:DataStateBehavior Binding="{Binding IsShowEditView}" 
                                  Value="True" 
                                  TrueState="ShowEditView" FalseState="ShowMatchView"/>
        </i:Interaction.Behaviors>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="ShowEditView">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="EditView">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                
                <VisualState x:Name="ShowMatchView">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MatchView">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ComboBox Grid.Row="0" Margin="10" 
                  HorizontalAlignment="Left" 
                  IsSynchronizedWithCurrentItem="True" 
                  SelectedValue="{Binding SelectStatus, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                  SelectedValuePath="Content" Width="100">
            <ComboBoxItem Content="{x:Static Res:Resources.RESSTR_People_Edit}"></ComboBoxItem>
            <ComboBoxItem Content="{x:Static Res:Resources.RESSTR_People_Match}"></ComboBoxItem>
        </ComboBox>
        
        <!--Edit-->
        <Grid x:Name="EditView" Visibility="Collapsed"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1">
            <local:PeopleDetailEditView DataContext="{Binding PeopleDetailEditView}"/>
        </Grid>
        
        <!--Match-->
        <Grid x:Name="MatchView" Visibility="Collapsed"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1">
            <local:PeopleDetailMatchView DataContext="{Binding PeopleDetailMatchView}"/>
        </Grid>
        
    </Grid>
</UserControl>