从现有样式继承并为派生样式添加新形状
Posted
技术标签:
【中文标题】从现有样式继承并为派生样式添加新形状【英文标题】：Inherit from existing style and add new shapes to derived style 【发布时间】：2012-04-09 19:33:49 【问题描述】：我有基于第一个样式的基本样式PlayButtonsStyle 和PauseButtonStyleInherited。如何将形状添加到派生的形状？我想添加两个矩形，使其看起来像暂停按钮（混合或 VS）
派生：
<Style x:Key="PauseButtonStyleInherited" BasedOn="StaticResource PlayButtonsStyle" TargetType="x:Type Button" >
基本：
<Style x:Key="PlayButtonsStyle" TargetType="x:Type Button">
<Setter Property="FocusVisualStyle" Value="StaticResource ButtonFocusVisual"/>
<Setter Property="Background" Value="StaticResource ButtonNormalBackground"/>
<Setter Property="BorderBrush" Value="StaticResource ButtonNormalBorder"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.ControlTextBrushKey"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type Button">
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="180"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="glow">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="glow">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="glow">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="glow">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.784"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.784"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-4.231"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="4.292"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="isPressed"/>
</ControlTemplate.Resources>
<Grid x:Name="grid" Height="Auto" Width="Auto" Margin="0.068,0.333,-0.264,0.666" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse x:Name="ellipse2" Margin="-0.106,0.018,0.106,-0.018" Stroke="#FF555453" Height="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" StrokeThickness="0" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX="0.426269" RadiusY="0.426269" Center="0.488153,0.0751377" GradientOrigin="0.488153,0.0751377">
<GradientStop Color="#FFDCD7D3" Offset="0"/>
<GradientStop Color="#FFBDB9B5" Offset="0.576744"/>
<GradientStop Color="#FF9E9B98" Offset="0.767442"/>
<GradientStop Color="#FF4B4A49" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse" Margin="1.796,2.097,2.008,2.061" Width="Auto" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch" Height="Auto">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF898989" Offset="0"/>
<GradientStop Color="#FF727272" Offset="0.132447"/>
<GradientStop Color="#FF5C5C5C" Offset="0.32093"/>
<GradientStop Color="#FF060606" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="glow" Margin="1.831,2.138,2.045,2.102" Visibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX="0.412293" RadiusY="0.41654" Center="0.300546,0.229947" GradientOrigin="0.300546,0.229947">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<SkewTransform CenterX="0.300546" CenterY="0.229947" AngleX="-1.08514" AngleY="0"/>
<RotateTransform CenterX="0.300546" CenterY="0.229947" Angle="238.875"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#A4FFFAFF" Offset="0"/>
<GradientStop Color="#52FFFCFF" Offset="0.40678"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse1" Height="8.982" Margin="-7.773,0,-5.394,-9" VerticalAlignment="Bottom" Opacity="0" d:IsHidden="True">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#00000000" Offset="1"/>
<GradientStop Color="#FF5F5F5F" Offset="0"/>
<GradientStop Color="#7F2F2F38" Offset="0.605"/>
<GradientStop Color="#4C141418" Offset="0.824"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsCancel" Value="False"/>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="StaticResource Storyboard1"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="isPressed_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="isPressed_BeginStoryboard" Storyboard="StaticResource isPressed"/>
</Trigger.EnterActions>
</Trigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="ToggleButton.IsChecked" Value="true"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
【问题讨论】：
【参考方案1】：我认为你做不到。我认为您需要使用派生样式中的其他形状重新定义控件模板。
【讨论】：
以上是关于从现有样式继承并为派生样式添加新形状的主要内容，如果未能解决你的问题，请参考以下文章