thes solution is to use attached properties since you can not access scoped elements in derived styles
Start by writing a helper class
class Helper:DependencyObject
{
public static object GetNormal(DependencyObject obj)
{
return (object)obj.GetValue(NormalProperty);
}
public static void SetNormal(DependencyObject obj, object value)
{
obj.SetValue(NormalProperty, value);
}
// Using a DependencyProperty as the backing store for Normal. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NormalProperty =
DependencyProperty.RegisterAttached("Normal", typeof(object), typeof(Helper), new PropertyMetadata(null));
public static object GetPressed(DependencyObject obj)
{
return (object)obj.GetValue(PressedProperty);
}
public static void SetPressed(DependencyObject obj, object value)
{
obj.SetValue(PressedProperty, value);
}
// Using a DependencyProperty as the backing store for Pressed. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PressedProperty =
DependencyProperty.RegisterAttached("Pressed", typeof(object), typeof(Helper), new PropertyMetadata(null));
public static object GetDisabled(DependencyObject obj)
{
return (object)obj.GetValue(DisabledProperty);
}
public static void SetDisabled(DependencyObject obj, object value)
{
obj.SetValue(DisabledProperty, value);
}
// Using a DependencyProperty as the backing store for Disabled. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DisabledProperty =
DependencyProperty.RegisterAttached("Disabled", typeof(object), typeof(object), new PropertyMetadata(null));
}
then modify your styles as follows. l: will refer to your namespace.
<Style x:Key="myDogToggleButton1"
TargetType="ToggleButton"
BasedOn="{x:Null}"
xmlns:l="clr-namespace:CSharpWPF">
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="l:Helper.Normal"
Value="/images/dogs/dog1.png" />
<Setter Property="l:Helper.Pressed"
Value="/images/dogs/dog3.png" />
<Setter Property="l:Helper.Disabled"
Value="/images/dogs/dog5.png" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Image Name="Normal"
Source="{TemplateBinding l:Helper.Normal}" />
<Image Name="Pressed"
Source="{TemplateBinding l:Helper.Pressed}"
Visibility="Hidden" />
<Image Name="Disabled"
Source="{TemplateBinding l:Helper.Disabled}"
Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed"
Value="True">
<Setter TargetName="Normal"
Property="Visibility"
Value="Hidden" />
<Setter TargetName="Pressed"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="Normal"
Property="Visibility"
Value="Hidden" />
<Setter TargetName="Disabled"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="myDogToggleButton2"
TargetType="ToggleButton"
BasedOn="{StaticResource myDogToggleButton1}"
xmlns:l="clr-namespace:CSharpWPF">
<Setter Property="l:Helper.Normal"
Value="/images/dogs/dog2.png" />
<Setter Property="l:Helper.Pressed"
Value="/images/dogs/dog2.png" />
<Setter Property="l:Helper.Disabled"
Value="/images/dogs/dog2.png" />
</Style>
a useful benefit
a useful benefit of this approach. you can also declare inline values instead of defining new style. eg
<ToggleButton l:Helper.Normal="image-normal.jpg"
l:Helper.Pressed="image-pressed.jpg"
l:Helper.Disabled="image-disabled.jpg"
Style="{StaticResource myDogToggleButton1}"/>
note that I am using the base style, this approach is helpful if you have to create a new style just for a single button.
Extra
below is the original template for Toggle button look for VisualStateManager.VisualStateGroups
and you'll be able to manipulate the property values based on the states i.e. Normal, Pressed, Disabled
and even more
<Style TargetType="ToggleButton">
<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="ToggleButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F2FFFFFF"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#CCFFFFFF"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#7FFFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF6DBDD1"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8FFFFFF"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6FFFFFF"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#8CFFFFFF"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#3FFFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="CheckStates">
<vsm:VisualState x:Name="Checked">
<Storyboard>
<PointAnimation Duration="0" To="0.7,1" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(LinearGradientBrush.StartPoint)"/>
<PointAnimation Duration="0" To="0.7,0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(LinearGradientBrush.EndPoint)"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unchecked"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused" />
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" />
<Rectangle x:Name="BackgroundGradient" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
more info on same here http://msdn.microsoft.com/en-us/library/cc296245(v=vs.95).aspx
Image.Source
in aControlTemplate
by using theImage.Name
property value as a property name in asetter
.