所以我一直在玩Silverlight的按钮样式,以及个人对于你需要多少努力来做一个简单的开/关状态的感觉,我想知道是否有人能告诉我如何改变我的内容到目前为止,我可以使用任何图像作为开关状态,而每个按钮没有7 x 60行XAML。
<UserControl x:Class="Reader.LanguageSelection"
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"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="1280">
<UserControl.Resources>
<Style x:Key="btnLangStyle" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-28" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-30" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="btnLangEn_off" Margin="27,24,-27,-24" Opacity="0" Source="Resources/Images/btnLangEn_off.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
<Image x:Name="btnLangEn_on" Margin="33,23,-33,-23" Opacity="0" Source="Resources/Images/btnLangEn_off.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Canvas Width="1280" Height="800">
<Button x:Name="btnLangEn" Width="93" Height="63" Click="btnLangEn_Click" Canvas.Left="417" Canvas.Top="463" Style="{StaticResource btnLangStyle}" />
<Button x:Name="btnLangEs" Width="93" Height="63" Content="Español" Click="btnLangEs_Click" Canvas.Left="503" Canvas.Top="576" />
<Button x:Name="btnLangDe" Width="93" Height="63" Content="Deutsch" Click="btnLangDe_Click" Canvas.Left="768" Canvas.Top="463" />
<Button x:Name="btnLangFr" Width="93" Height="63" Content="French" Click="btnLangFr_Click" Canvas.Left="593" Canvas.Top="463" />
<Button x:Name="btnLangIt" Width="93" Height="63" Content="Italian" Click="btnLangIt_Click" Canvas.Left="682" Canvas.Top="576" />
<Button x:Name="btnLangDa" Width="93" Height="63" Content="Danish" Click="btnLangDa_Click" Canvas.Left="593" Canvas.Top="686" />
</Canvas>
</Grid>
名为btnLangEn_off和btnLangEn_on的图像显然特定于一种类型的按钮,但我需要一种方法将该样式应用于我的所有按钮,告诉样式为每个状态呈现哪些图像。
谢谢, 格雷格。
答案 0 :(得分:0)
根据我的评论,这是我编写的一个例子。请注意,我没有对此进行测试,因此它可能无法正常工作,但您应该了解一般。
代码隐藏
public partial class CustomButton : Button
{
public static readonly DependencyProperty OnImageProperty =
DependencyProperty.Register("OnImageSource",
typeof (ImageSource),
typeof (CustomButton),
new PropertyMetadata(null));
public static readonly DependencyProperty OffImageProperty =
DependencyProperty.Register("OffImageSource",
typeof (ImageSource),
typeof (CustomButton),
new PropertyMetadata(null));
public CustomButton()
{
InitializeComponent();
Binding offBinding = new Binding
{
Source = this,
Path = new PropertyPath(OffImageProperty)
};
OffImage.SetBinding(Image.SourceProperty, offBinding);
Binding onBinding = new Binding
{
Source = this,
Path = new PropertyPath(OffImageProperty)
};
OnImage.SetBinding(Image.SourceProperty, onBinding);
}
public ImageSource OffImageSource
{
get { return (ImageSource) GetValue(OffImageProperty); }
set { SetValue(OffImageProperty, value); }
}
public ImageSource OnImageSource
{
get { return (ImageSource) GetValue(OnImageProperty); }
set { SetValue(OnImageProperty, value); }
}
}
XAML
<Button x:Class="CustomButton"
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"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Button.Resources>
<Image x:Name="OffImage"
Margin="27,24,-27,-24"
Opacity="0"
Stretch="Fill"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
<Image x:Name="OnImage"
Margin="33,23,-33,-23"
Opacity="0"
Stretch="Fill"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
</Button.Resources>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background"
Value="#FF1F3B53" />
<Setter Property="Foreground"
Value="#FF000000" />
<Setter Property="Padding"
Value="3" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9"
Offset="0" />
<GradientStop Color="#FF8399A9"
Offset="0.375" />
<GradientStop Color="#FF718597"
Offset="0.375" />
<GradientStop Color="#FF617584"
Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OffImage"
d:IsOptimized="True" />
<DoubleAnimation Duration="0"
To="-28"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="OffImage"
d:IsOptimized="True" />
<DoubleAnimation Duration="0"
To="-25"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="OffImage"
d:IsOptimized="True" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OnImage"
d:IsOptimized="True" />
<DoubleAnimation Duration="0"
To="-30"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="OnImage"
d:IsOptimized="True" />
<DoubleAnimation Duration="0"
To="-20"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="OnImage"
d:IsOptimized="True" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>