CODEWITHSUNDEEP
windowsxamlwindows-store-apps
ThomasCle
ThomasCle

Reputation: 6801

Binding to Slider value inside HeaderTemplate in Style

I have made a style for a Slider where I customize the HeaderTemplate like this:

<Style TargetType="Slider">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding}" Grid.Column="0" />
                    <TextBlock Text="{Binding Path=Value}" Grid.Column="1" />
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

The binding of the Header-property works fine and shows up in the TextBlock with the {Binding}. But I want the Value property of the Slider to show up in the second TextBlock, but I can't find a way to do that. I have tried with TemplatedParent as source, but that crashes because it tries to get the Value property on a object of ContentPresenter type.

How can I bind the Value property of the Slider to the second TextBlock?

Upvotes: 0

Views: 301

Answers (1)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21899

The HeaderTemplate gets only the contents of the Header to play with. It can't see the other properties on the Slider. Since it sounds like you're aiming for a specific constant look, do you need to use the HeaderTemplate? If you embed your Header in the Slider's template then it can access the Value via RelativeSource.

Right click on the Slider and choose Edit Template.Edit a Copy... to get a copy of the Slider's template. In the template find the HeaderContentPresenter and replace it with your Grid template:

<!--<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}"  Foreground="{ThemeResource SliderHeaderForegroundThemeBrush}" FontWeight="{ThemeResource SliderHeaderThemeFontWeight}" Margin="{ThemeResource SliderHeaderThemeMargin}"/>-->

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}" Grid.Column="0" />
    <TextBlock Text="{Binding  RelativeSource={RelativeSource TemplatedParent}, Path=Value}"  Grid.Column="1"/>
</Grid>

If you want to allow further customization of the Header you can use the ContentPresenter instead of the Path=Header TextBlock.

Upvotes: 1

Related Questions