XAML 中滑动 CheckBox 内的图像 [英] Image inside sliding CheckBox in XAML
本文介绍了XAML 中滑动 CheckBox 内的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
I have the following style that I got from [Here]https://stackoverflow.com/a/5349484/3260977) and I have added an image to the Border with x:Name = "slider". I want to reuse this control and want to be able to assign the image source for each control without having to duplicate the style for each control. Here is my style:
<Style x:Key="OrangeSwitchStyle" TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnChecking">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="53" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnUnchecking">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<DockPanel x:Name="dockPanel">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
RecognizesAccessKey="True"
VerticalAlignment="Center"
DockPanel.Dock="Top"/>
<Grid DockPanel.Dock="Bottom">
<Border x:Name="BackgroundBorder"
BorderBrush="#FF939393"
BorderThickness="1"
CornerRadius="3"
Height="27"
Width="94">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFB5B5B5" Offset="0" />
<GradientStop Color="#FFDEDEDE" Offset="0.1" />
<GradientStop Color="#FFEEEEEE" Offset="0.5" />
<GradientStop Color="#FFFAFAFA" Offset="0.5" />
<GradientStop Color="#FFFEFEFE" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Ellipse x:Name="Off"
Width="14"
Height="14"
Stroke="#FF7A7A7A"
StrokeThickness="2"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Line x:Name="On"
X1="0"
Y1="0"
X2="0"
Y2="14"
Stroke="#FF7A7A7A"
StrokeThickness="2"
Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
<Border BorderBrush="#FF939393"
HorizontalAlignment="Left"
x:Name="slider"
Width="41"
Height="27"
BorderThickness="1"
CornerRadius="3"
RenderTransformOrigin="0.5,0.5"
Margin="0">
<Image Source="Resources/Capture.png" Width="30" Height="30"></Image>
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
<SkewTransform AngleX="0" AngleY="0" />
<RotateTransform Angle="0" />
<TranslateTransform X="0" Y="0" />
</TransformGroup>
</Border.RenderTransform>
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF0F0F0" Offset="0" />
<GradientStop Color="#FFCDCDCD" Offset="0.1" />
<GradientStop Color="#FFFBFBFB" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource OnUnchecking}" x:Name="OnUnchecking_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource OnChecking}" x:Name="OnChecking_BeginStoryboard" />
</Trigger.EnterActions>
<Setter TargetName="On" Property="Stroke" Value="White" />
<Setter TargetName="Off" Property="Stroke" Value="White" />
<!-- Change Orange or Blue color here -->
<Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource CheckedOrange}" />
<Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource CheckedOrangeBorder}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<!-- ToDo: Add Style for Isenabled == False -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
并且想要更改每个控件的源...
And want to change the source for each control...
有什么想法吗?
谢谢！
推荐答案
使用 Datatemplate 和 ContentTemplate 我们可以重用这种样式.请参阅注释文本.我删除了 <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" ></ContentPresenter> 并添加了 <ContentControl ContentTemplate="{TemplateBinding ContentTemplate}" Width="30" Height="30"/>而不是图像控件，因为图像没有 ContentTemplate 属性.
Using Datatemplate and ContentTemplate we can reuse this style.Please see commented text. I have removed <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" ></ContentPresenter> and added <ContentControl ContentTemplate="{TemplateBinding ContentTemplate}" Width="30" Height="30"/> instead of Image control as image doent have ContentTemplate property.
<Window.Resources>
<DataTemplate x:Key="Image1">
<Image Source="darblue_tab.png"></Image>
</DataTemplate>
<Style TargetType="{x:Type CheckBox}">
.......
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
......
<DockPanel x:Name="dockPanel">
<!--Remove ContentTemplate="{TemplateBinding ContentTemplate}" from ContentPresenter-->
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" RecognizesAccessKey="True" VerticalAlignment="Center" DockPanel.Dock="Top"/>
<Grid DockPanel.Dock="Bottom">
......
<Border BorderBrush="#FF939393" HorizontalAlignment="Left" x:Name="slider" Width="41" Height="27" BorderThickness="1" CornerRadius="3" RenderTransformOrigin="0.5,0.5" Margin="0">
<!--Use ContentControl control as image doesn't have content,ControlTemplate and ContentTemplate property. -->
<ContentControl ContentTemplate="{TemplateBinding ContentTemplate}" Width="30" Height="30"/>
</Border>
.......
</Grid>
</DockPanel>
......
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<CheckBox Content="Checkbox" ContentTemplate="{StaticResource Image1}" ></CheckBox>
这篇关于XAML 中滑动 CheckBox 内的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
