CODEWITHSUNDEEP
wpfsliderstyles
mot rer
mot rer

Reputation: 153

WPF add new Slider style cause XamlParseException

i found this slider style that i want to add.

i added all the 3 styles inside my Window.Resources and also put in the first style the 2 templates:

    <Style TargetType="{x:Type Slider}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyte}" />
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Slider}">
                    <Grid Margin="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Left" SnapsToDevicePixels="True"
             Width="4" Margin="0,0,2,0" />
                        <Border x:Name="TrackBackground"
            Grid.Column="1"
            Margin="0,10"
            BorderThickness="2"
            BorderBrush="LightGray"
            HorizontalAlignment="Center" Width="4" />
                        <Track x:Name="PART_Track" Grid.Column="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.DecreaseLarge}"  Style="{StaticResource SliderRepeatButtonStyle}" />
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
                            </Track.Thumb>
                        </Track>
                        <TickBar x:Name="BottomTick" Grid.Column="2" Visibility="Collapsed" Fill="LightGray" Placement="Right"
             Width="4" Margin="2,0,0,0" SnapsToDevicePixels="True" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TickPlacement" Value="TopLeft">
                            <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="BottomRight">
                            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="Both">
                            <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Slider}">
                    <Grid Margin="5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Top" SnapsToDevicePixels="True"
             Height="4" Margin="0,0,0,2" />
                        <Border x:Name="TrackBackground"
            Grid.Row="1"
            Margin="10,0"
            BorderThickness="2"
            BorderBrush="LightGray"
            VerticalAlignment="Center" Height="4" />
                        <Track x:Name="PART_Track" Grid.Row="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.DecreaseLarge}"  Style="{StaticResource SliderRepeatButtonStyle}" />
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
                            </Track.Thumb>
                        </Track>
                        <TickBar x:Name="BottomTick" Grid.Row="2" Visibility="Collapsed" Fill="LightGray" Placement="Bottom"
             SnapsToDevicePixels="True" Height="4" Margin="0,2,0,0"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TickPlacement" Value="TopLeft">
                            <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="BottomRight">
                            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="Both">
                            <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="MinWidth" Value="104" />
                <Setter Property="MinHeight" Value="21" />
                <Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="MinWidth" Value="21" />
                <Setter Property="MinHeight" Value="104" />
                <Setter Property="Template" Value="{StaticResource VerticalSlider}" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="Transparent"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Grid>
                        <Border Name="outerBorder"
                        Background="#5534b4e3"
                        BorderBrush="#5534b4e3"
                        Height="26" Width="26" Opacity="1" BorderThickness="2" CornerRadius="13"/>
                        <Border Name="innerBorder"
                        Background="#FF34b4e3"
                        BorderBrush="#FF34b4e3"
                        Height="10" Width="10" CornerRadius="5" Opacity="1" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="outerBorder" Property="BorderBrush" Value="#BB34b4e3" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="outerBorder" Property="Background" Value="#55ACACAC" />
                            <Setter TargetName="outerBorder" Property="BorderBrush" Value="#55ACACAC" />
                            <Setter TargetName="innerBorder" Property="Width" Value="4" />
                            <Setter TargetName="innerBorder" Property="Height" Value="4" />
                            <Setter TargetName="innerBorder" Property="CornerRadius" Value="2" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="MyFocusVisualStyte" >
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle x:Name="FocusStyle" StrokeDashArray="4 4" RadiusX="5" RadiusY="5" Fill="Transparent"
                       Stroke="#99029cc7" StrokeThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

because i want to give all my application sliders the same look i removed the x:key from all except the x:Key="MyFocusVisualStyte" in the first style because in this case this line:

<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyte}" />

I have error: The resource MyFocusVisualStyte could not be resolved. And after add slider:

<Slider Margin="454,122,0,543" />

I can see in the designer this slider:

http://oi57.tinypic.com/2ijcxd.jpg

but when ry to run my application i have XamlParseException:

A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll

Additional information: 'Initialization of 'System.Windows.Controls.Slider' threw an exception.' Line number '921' and line position '17'.

What i am doing wrong ?

Upvotes: 0

Views: 515

Answers (1)

almulo
almulo

Reputation: 4978

These Styles reference other Styles and Templates via StaticResource: MyFocusVisualStyte (Typo? Shouldn't it be MyFocusVisualStyle?), SliderThumbStyle, SliderRepeatButtonStyle, HorizontalSlider, VerticalSlider...

All these Styles and Templates must exist and be defined BEFORE they're used.

In this case, the resources must be defined in this order (I'll copy only the first node of each, and the parts where other Styles or Templates are referenced, to explain why the order is important):

First, FocusVisual Style, Thumb Style and the RepeatButton Style. These Styles have no reference to other resources, so they're safe to be defined first:

<Style x:Key="MyFocusVisualStyte" >
    ...

<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
    ...

<Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
    ...

Then, the Horizontal and Vertical Slider Templates. The RepeatButtons and Thumbs inside use the Styles above, so they must be defined after those:

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
    ...
    <Track x:Name="PART_Track" Grid.Row="1">
        <Track.DecreaseRepeatButton>
            <RepeatButton Command="{x:Static Slider.DecreaseLarge}"
                          Style="{StaticResource SliderRepeatButtonStyle}" />
        </Track.DecreaseRepeatButton>
        <Track.IncreaseRepeatButton>
            <RepeatButton Command="{x:Static Slider.IncreaseLarge}"
                          Style="{StaticResource SliderRepeatButtonStyle}"/>
        </Track.IncreaseRepeatButton>
        <Track.Thumb>
            <Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
        </Track.Thumb>
    </Track>
    ...

<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
    ...
    <Track x:Name="PART_Track" Grid.Column="1">
        <Track.DecreaseRepeatButton>
            <RepeatButton Command="{x:Static Slider.DecreaseLarge}"
                          Style="{StaticResource SliderRepeatButtonStyle}" />
        </Track.DecreaseRepeatButton>
        <Track.IncreaseRepeatButton>
            <RepeatButton Command="{x:Static Slider.IncreaseLarge}"
                          Style="{StaticResource SliderRepeatButtonStyle}"/>
        </Track.IncreaseRepeatButton>
        <Track.Thumb>
            <Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
        </Track.Thumb>
    </Track>
    ...

And finally, the Slider Style itself, that references these two Templates (and the FocusVisual Style). You can leave this one without the x:Key, so all your Sliders use the Style by default:

<Style TargetType="{x:Type Slider}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyte}" />
    ...
    <Trigger Property="Orientation" Value="Horizontal">
        ...
        <Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
    </Trigger>
    <Trigger Property="Orientation" Value="Vertical">
        ...
        <Setter Property="Template" Value="{StaticResource VerticalSlider}" />
    </Trigger>
    ...

Upvotes: 2

Related Questions