VisualStateManager不會以wpf格式更改窗口的大小

Question

我定義了兩個狀態，一個大，另一個小，大狀態將增加窗口大小，小狀態將減小窗口大小。

該窗口有一個標簽控件和2個tabitem。 我要做的是，在選擇tab1時將窗口的大小更改為“大”狀態，在選擇“ tab2”時將窗口的大小更改為“小”狀態。 我編寫了以下代碼，但無法正常工作。

以下是XAML代碼。

<Window x:Name="window" x:Class="WpfApp2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp2"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition From="Big" GeneratedDuration="0:0:1" To="Small"/>
                <VisualTransition From="Small" GeneratedDuration="0:0:1" To="Big"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Big">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window">
                        <EasingDoubleKeyFrame KeyTime="0" Value="558.333"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Small">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window">
                        <EasingDoubleKeyFrame KeyTime="0" Value="290.152"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <TabControl HorizontalAlignment="Left" Height="319" VerticalAlignment="Top" Width="517" SelectionChanged="changes">
        <TabItem Header="TabItem" Name="tab1"/>
        <TabItem Header="TabItem" Name="tab2"/>
    </TabControl>

</Grid>

以下是c＃代碼。

 private void changes(object sender, SelectionChangedEventArgs e)
    {
        if (tab1.IsSelected)
        {
            VisualStateManager.GoToState(window, "Big", true);
        }
        else
        {
            VisualStateManager.GoToState(window, "Small", true);
        }
        i++;
    }

Answer 1

首先將VisualStateManager.VisualStateGroups附加屬性及其內容移動到根元素（ Window ）的正下方。

<Window x:Name="window" x:Class="WpfApp2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp2"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition From="Big" GeneratedDuration="0:0:1" To="Small"/>
                <VisualTransition From="Small" GeneratedDuration="0:0:1" To="Big"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Big">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window">
                        <EasingDoubleKeyFrame KeyTime="0" Value="558.333"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Small">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window">
                        <EasingDoubleKeyFrame KeyTime="0" Value="290.152"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid>
        <TabControl HorizontalAlignment="Left" Height="319" VerticalAlignment="Top" Width="517" SelectionChanged="changes">
            <TabItem Header="TabItem" Name="tab1"/>
            <TabItem Header="TabItem" Name="tab2"/>
        </TabControl>

    </Grid>
</Window>

並使用GoToElementState方法，而不是GoToState 。 在ControlTemplate外部，應使用GoToElementState方法。

private void changes(object sender, SelectionChangedEventArgs e)
{
    if (tab1.IsSelected)
    {
        VisualStateManager.GoToElementState(window, "Big", true);
    }
    else
    {
        VisualStateManager.GoToElementState(window, "Small", true);
    }
}