Blend 2015 tutorial (5) custom status, blend2015

Blend 2015 tutorial (5) custom status, blend2015

This article introduces the custom status.

Custom states are used to encapsulate the appearance changes and animation effects of user controls during switching between various States for convenient calling. For example, if a user control is used to enable or disable a switchover similar to a stage canvas, you can create a canvas closure and a canvas to open two statuses, edit the interface and animation, and then call the status switch, you can easily enable or disable the backdrop. The following shows the demo.

1. Create a user control named CurtainControl and open the user control's xaml for editing.

2. In the status panel, click the Add status group button to name the newly added status group as CurtainControlStateGroup. Click the Add status button to add two statuses, named CurtainOpened and CurtainClosed.

3. Click the "Basic" status item in the status panel and divide the Grid in the interface into four columns. The two columns on both sides are 0, the two columns in the middle are *, and the background is changed to white. Put two Border in the outer Grid, respectively in the middle of the two columns, the background color is changed to a radial gradient (for demonstration convenience, the actual project can be carefully designed), add a side color, it is best to extract styles. The Code is as follows,

<UserControl             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:d="http://schemas.microsoft.com/expression/blend/2008"             xmlns:x:Class="BlendDemo.CurtainControl"             mc:Ignorable="d"             d:DesignHeight="300" d:DesignWidth="300">    <UserControl.Resources>        <Style x:Key="CurtainStyle" TargetType="{x:Type Border}">            <Setter Property="Background">                <Setter.Value>                    <RadialGradientBrush>                        <GradientStop Color="Black" Offset="0"/>                        <GradientStop Color="#FFFFC1C1" Offset="1"/>                        <GradientStop Color="#FF382B2B" Offset="0.223"/>                        <GradientStop Color="#FF755959" Offset="0.465"/>                    </RadialGradientBrush>                </Setter.Value>            </Setter>            <Setter Property="BorderBrush" Value="#FF00B9FF"/>            <Setter Property="BorderThickness" Value="1"/>        </Style>    </UserControl.Resources>    <Grid Background="White">        <Grid.ColumnDefinitions>            <ColumnDefinition Width="0"/>            <ColumnDefinition/>            <ColumnDefinition/>            <ColumnDefinition Width="0"/>        </Grid.ColumnDefinitions>        <VisualStateManager.VisualStateGroups>            <VisualStateGroup x:Name="CurtainControlStateGroup">                <VisualState x:Name="CurtainOpened"/>                <VisualState x:Name="CurtainClosed"/>            </VisualStateGroup>        </VisualStateManager.VisualStateGroups>        <Border Grid.Column="1" Style="{DynamicResource CurtainStyle}"/>        <Border Grid.Column="2" Style="{DynamicResource CurtainStyle}"/>    </Grid></UserControl>

4. Click the open FluidLayout button of the CurtainControlStateGroup status group in the status Panel (the icon is the upper and lower two wavy lines), and select the CurtainOpened status item to enter the animation recording status. Change Grid. Column of the First Border from 1 to 0, and change Grid. Column of the Second Border from 2 to 3.

5. Click the "Basic" status item on the Status panel to exit the animation recording status. Change the default over time of the CurtainControlStateGroup status group to 1 s.

The user control is complete. The complete code is as follows.

<UserControl             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:d="http://schemas.microsoft.com/expression/blend/2008"             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"             x:Class ="BlendDemo.CurtainControl"             mc:Ignorable="d"             d:DesignHeight="300" d:DesignWidth="300">    <UserControl.Resources>        <Style x:Key="CurtainStyle" TargetType="{x:Type Border}">            <Setter Property="Background">                <Setter.Value>                    <RadialGradientBrush>                        <GradientStop Color="Black" Offset="0"/>                        <GradientStop Color="#FFFFC1C1" Offset="1"/>                        <GradientStop Color="#FF382B2B" Offset="0.223"/>                        <GradientStop Color="#FF755959" Offset="0.465"/>                    </RadialGradientBrush>                </Setter.Value>            </Setter>            <Setter Property="BorderBrush" Value="#FF00B9FF"/>            <Setter Property="BorderThickness" Value="1"/>        </Style>    </UserControl.Resources>    <Grid Background="White">        <Grid.ColumnDefinitions>            <ColumnDefinition Width="0"/>            <ColumnDefinition/>            <ColumnDefinition/>            <ColumnDefinition Width="0"/>        </Grid.ColumnDefinitions>        <VisualStateManager.VisualStateGroups>            <VisualStateGroup x:Name="CurtainControlStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">                <VisualStateGroup.Transitions>                    <VisualTransition GeneratedDuration="0:0:1"/>                </VisualStateGroup.Transitions>                <VisualState x:Name="CurtainOpened">                    <Storyboard>                        <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="border">                            <EasingInt32KeyFrame KeyTime="0" Value="0"/>                        </Int32AnimationUsingKeyFrames>                        <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="border1">                            <EasingInt32KeyFrame KeyTime="0" Value="3"/>                        </Int32AnimationUsingKeyFrames>                    </Storyboard>                </VisualState>                <VisualState x:Name="CurtainClosed"/>            </VisualStateGroup>        </VisualStateManager.VisualStateGroups>        <VisualStateManager.CustomVisualStateManager>            <ei:ExtendedVisualStateManager/>        </VisualStateManager.CustomVisualStateManager>        <Border x:Name="border" Grid.Column="1" Style="{DynamicResource CurtainStyle}"/>        <Border x:Name="border1" Grid.Column="2" Style="{DynamicResource CurtainStyle}"/>    </Grid></UserControl>

6. Create an empty window and set it to the program startup window. Add two rows to the outer Grid. The first row is Auto. Put two buttons (a horizontal StackPanel is set on the outer side), and the text is turned on and off. The second behavior is *, which is placed in the CurtainControl Control and found in the "items" category of the asset panel. If the control cannot be found, create a project.

7. On the asset panel, select "behavior" and drag GoToStateAction to the first Button in the document outline panel. On the property panel, click the artist plate element selector button for the TargetName attribute under the Public group (there is a black dot in the middle of the circle), and select the CurtainControl control in the art board. Click the StateName attribute drop-down box and select the CurtainOpened status. The second Button also performs the same operation, and the StateName attribute selects the CurtainClosed status.

Now, the demo is complete. The Window1 code is as follows.

<Window 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: BlendDemo "xmlns: I =" http://schemas.microsoft.com/expression/2010/interactivity "Xmlns: ei =" http://schemas.microsoft.com/expression/2010/interactions "X: Class =" BlendDemo. window1 "mc: Ignorable =" d "Title =" Window1 "Height =" 322 "Width =" 375 "> <Grid. rowDefinitions> <RowDefinition Height = "Auto"/> <RowDefinition/> </Grid. rowDefinitions> <local: CurtainControl x: Name = "curtainControl" Grid. row = "1"/> <StackPanel Orientation = "Horizontal"> <Button Content = "open"> <I: Interaction. triggers> <I: EventTrigger EventName = "Click"> <ei: GoToStateAction TargetName = "curtainControl" StateName = "CurtainOpened"/> </I: EventTrigger> </I: Interaction. triggers> </Button> <Button Content = "close"> <I: Interaction. triggers> <I: EventTrigger EventName = "Click"> <ei: GoToStateAction TargetName = "curtainControl" StateName = "CurtainClosed"/> </I: EventTrigger> </I: Interaction. triggers> </Button> </StackPanel> </Grid> </Window>

The interface effect is as follows,

Click the open or close button to try the effect.