Skip to content

VisualStateManager

L edited this page Dec 31, 2017 · 3 revisions

管理控件状态和管理控件状态的转换逻辑

<Window.Resources>
	<Style TargetType="Button" x:Key="AnimatedStyle" >
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="Button">
					<!-- Define our button's border. Note that
					the text color is inherited by child 
					elements, that is we give it a name, so 
					we can target it with the animation -->
					<Border BorderBrush="Black" BorderThickness="1" 
					CornerRadius="2" 
					TextBlock.Foreground="WhiteSmoke" 
					Name="theBorder">
						<Grid>
							<Grid.RowDefinitions>
								<RowDefinition />
								<RowDefinition />
							</Grid.RowDefinitions>

							<!-- To match the appearance of a typical button, 
							we use two rectangles -->
							<Rectangle Name="topBackground" Fill="DarkGray"/>
							<Rectangle Grid.Row="1" Name="bottomBackground" 
								Fill="Black" />

							<!-- The content presenter shows the 
							button's text -->
							<ContentPresenter Grid.RowSpan="2" 
								VerticalAlignment="Center" 
								HorizontalAlignment="Center" />
						</Grid>
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup Name="CommonStates">

								<!-- Here is where we define 
							the disable animation -->
								<!--控件有状态Disabled,Normal等等-->
								<VisualState Name="Disabled">
									<Storyboard>
										<ColorAnimation 
										Storyboard.TargetName="topBackground"
										Storyboard.TargetProperty="(Rectangle.Fill).(Color)"
										To="White" Duration="0:0:.5" />
										<ColorAnimation 
										Storyboard.TargetName="bottomBackground"
										Storyboard.TargetProperty="(Rectangle.Fill).(Color)"
										To="WhiteSmoke" Duration="0:0:0.5" />
										<ColorAnimation 
										Storyboard.TargetName="theBorder"
										Storyboard.TargetProperty="(TextBlock.Foreground).(Color)"
										To="Gray" Duration="0:0:0.5" />
									</Storyboard>
								</VisualState>

								<!-- Here is where the enabled animation 
								is defined -->
								<VisualState Name="Normal">
									<Storyboard>
										<ColorAnimation 
										Storyboard.TargetName="topBackground"
										Storyboard.TargetProperty="(Rectangle.Fill).Color"
										To="DarkGray" Duration="0:0:0.5" />
										<ColorAnimation 
										Storyboard.TargetName="bottomBackground"
										Storyboard.TargetProperty="(Rectangle.Fill).(Color)"
										To="Black" Duration="0:0:0.5" />
										<ColorAnimation 
										Storyboard.TargetName="theBorder"
										Storyboard.TargetProperty="(TextBlock.Foreground).Color"
										To="WhiteSmoke" Duration="0:0:0.5" />
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
					</Border>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Window.Resources>
<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="*"></RowDefinition>
		<RowDefinition Height="*"></RowDefinition>
	</Grid.RowDefinitions>
	<CheckBox Grid.Row="0" Content="Enable Button" 
		Name="chkEnabled" IsChecked="True" VerticalAlignment="Center" />
	<!--此处通过IsEnabled来进行DisabledNormal二者的切换-->
	<Button Grid.Row="1" Content="Test Button" Name="btnTest" 
	IsEnabled="{Binding ElementName=chkEnabled,Path=IsChecked}" 
	Style="{StaticResource AnimatedStyle}" Click="ButtonClick"/>
</Grid>

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/WPF/WpfDemo/VisualStateManager

Clone this wiki locally