I would customize the ToggleSwitch from MahApps. For that I made a project and opened it with the Visual Blend 2019. I simply done:
Sadly I'm getting : "'KnobTranslateTransform' name cannot be found in the name scope of 'System.Windows.Controls.Border'."
Do I missing some Reference? Or do I have to set the KnobTranslateTransform with some additional stuff?
Thanks for any help.
This are my references: Solution Explorer
This is my xaml file:
<Window
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"
xmlns:local="clr-namespace:ToggleAirCustomSwitch"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="ToggleAirCustomSwitch.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="ToggleSwitchAirStyle" TargetType="{x:Type mah:ToggleSwitch}">
<Setter Property="ContentDirection" Value="RightToLeft"/>
<Setter Property="FontFamily" Value="{DynamicResource MahApps.Fonts.Family.ToggleSwitch}"/>
<Setter Property="FontSize" Value="{DynamicResource MahApps.Font.Size.ToggleSwitch}"/>
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.ContentForeground}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type mah:ToggleSwitch}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding mah:ControlsHelper.CornerRadius}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ToggleStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Dragging" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" To="On">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="24">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase Exponent="9"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobBounds">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OuterBorder">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobOn">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobOff">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Dragging" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" To="Off">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase Exponent="9"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="On" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" To="Off">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase Exponent="9"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Off" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" To="On">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="24">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase Exponent="9"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobBounds">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OuterBorder">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobOn">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobOff">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Dragging"/>
<VisualState x:Name="Off">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="On">
<Storyboard>
<DoubleAnimation Duration="0" To="24" Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobBounds">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OuterBorder">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobOn">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SwitchKnobOff">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ContentStates">
<VisualState x:Name="OffContent">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OffContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OffContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OnContent">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OnContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" TextElement.Foreground="{DynamicResource MahApps.Brushes.ToggleSwitch.HeaderForeground}" TextElement.FontWeight="{TemplateBinding mah:HeaderedControlHelper.HeaderFontWeight}" TextElement.FontStretch="{TemplateBinding mah:HeaderedControlHelper.HeaderFontStretch}" TextElement.FontSize="{TemplateBinding mah:HeaderedControlHelper.HeaderFontSize}" TextElement.FontFamily="{TemplateBinding mah:HeaderedControlHelper.HeaderFontFamily}" HorizontalAlignment="{TemplateBinding mah:HeaderedControlHelper.HeaderHorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding mah:HeaderedControlHelper.HeaderMargin}" Grid.Row="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding mah:HeaderedControlHelper.HeaderVerticalContentAlignment}"/>
<Grid HorizontalAlignment="Left" MinWidth="{DynamicResource ToggleSwitchThemeMinWidth}" Grid.Row="1" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="{DynamicResource ToggleSwitchContentSpaceMargin}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}"/>
</Grid.RowDefinitions>
<Grid x:Name="SwitchAreaGrid" Background="{DynamicResource MahApps.Brushes.ToggleSwitch.ContainerBackground}" Grid.ColumnSpan="3" Margin="0,5" Grid.RowSpan="3"/>
<ContentPresenter x:Name="OffContentPresenter" ContentTemplate="{TemplateBinding OffContentTemplate}" Content="{TemplateBinding OffContent}" Grid.Column="2" ContentStringFormat="{TemplateBinding OffContentStringFormat}" TextElement.Foreground="{TemplateBinding Foreground}" TextElement.FontSize="{TemplateBinding FontSize}" TextElement.FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding ContentPadding}" Opacity="0" Grid.Row="0" Grid.RowSpan="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="OnContentPresenter" ContentTemplate="{TemplateBinding OnContentTemplate}" Content="{TemplateBinding OnContent}" Grid.Column="2" ContentStringFormat="{TemplateBinding OnContentStringFormat}" TextElement.Foreground="{TemplateBinding Foreground}" TextElement.FontSize="{TemplateBinding FontSize}" TextElement.FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding ContentPadding}" Opacity="0" Grid.Row="0" Grid.RowSpan="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="2" ContentStringFormat="{TemplateBinding ContentStringFormat}" TextElement.Foreground="{TemplateBinding Foreground}" TextElement.FontSize="{TemplateBinding FontSize}" TextElement.FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding ContentPadding}" Grid.Row="0" Grid.RowSpan="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Grid x:Name="Switch" Grid.Column="0" HorizontalAlignment="Left" Height="20" Grid.Row="1" Width="44">
<Rectangle x:Name="OuterBorder" Fill="{DynamicResource MahApps.Brushes.ToggleSwitch.FillOff}" RadiusY="10" RadiusX="10" Stroke="{DynamicResource MahApps.Brushes.ToggleSwitch.StrokeOff}" StrokeThickness="{DynamicResource ToggleSwitchOffStrokeThickness}"/>
<Rectangle x:Name="SwitchKnobBounds" Fill="{DynamicResource MahApps.Brushes.ToggleSwitch.FillOn}" Opacity="0" RadiusY="10" RadiusX="10" Stroke="{DynamicResource MahApps.Brushes.ToggleSwitch.StrokeOn}" StrokeThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/>
<Grid x:Name="SwitchKnob" HorizontalAlignment="Left" Height="20" Width="20">
<Grid.RenderTransform>
<TranslateTransform/>
</Grid.RenderTransform>
<Ellipse x:Name="SwitchKnobOn" Fill="{DynamicResource MahApps.Brushes.ToggleSwitch.KnobFillOn}" Height="10" Opacity="0" Width="10"/>
<Ellipse x:Name="SwitchKnobOff" Fill="{DynamicResource MahApps.Brushes.ToggleSwitch.KnobFillOff}" Height="10" Width="10"/>
</Grid>
</Grid>
<Thumb x:Name="SwitchThumb" Grid.ColumnSpan="3" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
<Thumb.Template>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ContentDirection" Value="LeftToRight">
<Setter Property="Grid.Column" TargetName="ContentPresenter" Value="0"/>
<Setter Property="Grid.Column" TargetName="OffContentPresenter" Value="0"/>
<Setter Property="Grid.Column" TargetName="OnContentPresenter" Value="0"/>
<Setter Property="Grid.Column" TargetName="Switch" Value="2"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="OuterBorder" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.FillOffPointerOver}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.StrokeOffPointerOver}"/>
<Setter Property="Background" TargetName="SwitchAreaGrid" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.ContainerBackgroundPointerOver}"/>
<Setter Property="Fill" TargetName="SwitchKnobBounds" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.FillOnPointerOver}"/>
<Setter Property="Stroke" TargetName="SwitchKnobBounds" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.StrokeOnPointerOver}"/>
<Setter Property="Fill" TargetName="SwitchKnobOff" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.KnobFillOffPointerOver}"/>
<Setter Property="Fill" TargetName="SwitchKnobOn" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.KnobFillOnPointerOver}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Fill" TargetName="OuterBorder" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.FillOffPressed}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.StrokeOffPressed}"/>
<Setter Property="StrokeThickness" TargetName="OuterBorder" Value="0"/>
<Setter Property="Background" TargetName="SwitchAreaGrid" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.ContainerBackgroundPressed}"/>
<Setter Property="Fill" TargetName="SwitchKnobBounds" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.FillOnPressed}"/>
<Setter Property="Stroke" TargetName="SwitchKnobBounds" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.StrokeOnPressed}"/>
<Setter Property="Fill" TargetName="SwitchKnobOff" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.KnobFillOffPressed}"/>
<Setter Property="Fill" TargetName="SwitchKnobOn" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.KnobFillOnPressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="ContentPresenter" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.ContentForegroundDisabled}"/>
<Setter Property="TextElement.Foreground" TargetName="HeaderContentPresenter" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.HeaderForegroundDisabled}"/>
<Setter Property="TextElement.Foreground" TargetName="OffContentPresenter" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.ContentForegroundDisabled}"/>
<Setter Property="TextElement.Foreground" TargetName="OnContentPresenter" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.ContentForegroundDisabled}"/>
<Setter Property="Fill" TargetName="OuterBorder" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.FillOffDisabled}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.StrokeOffDisabled}"/>
<Setter Property="Background" TargetName="SwitchAreaGrid" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.ContainerBackgroundDisabled}"/>
<Setter Property="Fill" TargetName="SwitchKnobBounds" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.FillOnDisabled}"/>
<Setter Property="Stroke" TargetName="SwitchKnobBounds" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.StrokeOnDisabled}"/>
<Setter Property="Fill" TargetName="SwitchKnobOff" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.KnobFillOffDisabled}"/>
<Setter Property="Fill" TargetName="SwitchKnobOn" Value="{DynamicResource MahApps.Brushes.ToggleSwitch.KnobFillOnDisabled}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Validation.ErrorTemplate" Value="{DynamicResource MahApps.Templates.ValidationError}"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="mah:HeaderedControlHelper.HeaderFontFamily" Value="{DynamicResource MahApps.Fonts.Family.ToggleSwitch.Header}"/>
<Setter Property="mah:HeaderedControlHelper.HeaderFontSize" Value="{DynamicResource MahApps.Font.Size.ToggleSwitch.Header}"/>
<Setter Property="mah:HeaderedControlHelper.HeaderMargin" Value="{DynamicResource ToggleSwitchTopHeaderMargin}"/>
</Style>
</Window.Resources>
<Grid>
<mah:ToggleSwitch x:Name="RibbAirOnOff_ToggleSwitch"
IsOn="{Binding ToggleSwitchAirIsChecked}"
IsEnabled="{Binding ToggleSwitchAirIsEnabled, Mode=OneWay}"
VerticalAlignment="Center"
OnCommand="{Binding AirOnCommand}"
OffCommand="{Binding AirOffCommand}"
HorizontalAlignment="Center" Grid.Column="1" Style="{DynamicResource ToggleSwitchAirStyle}"/>
</Grid>
</Window>
The style was not properly extracted by Blend. In the following line, the assignment of the name x:Name="KnobTranslateTransform" is missing, so the element has no name and cannot be found.
<Grid.RenderTransform>
<TranslateTransform x:Name="KnobTranslateTransform" />
</Grid.RenderTransform>
It should look like this instead:
<Grid.RenderTransform>
<TranslateTransform x:Name="KnobTranslateTransform"/>
</Grid.RenderTransform>
I suppose that there could be other errors in the style and template. I recommend you to copy the style directly from the GitHub repository, as Blend does not seem to be reliable here. The style for ToggleSwitch can be found here.