Trying to get value of a slider from parent control

Question

Hi all,

I'm Trying to get the value of a slider thats contained in a window from a usercontrol thats also contained in that window.

this is what i would like to accomplish.

<Window x:Class="TestApp3.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1">
    <Window.Resources>

        <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
            <Setter Property="Value" Value="10" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Interval" Value="1" />
            <Setter Property="Minimum" Value="5" />
            <Setter Property="Maximum" Value="50" />
            <Setter Property="TickFrequency" Value="0.25" />
            <Setter Property="IsSnapToTickEnabled" Value="True" />
            <Setter Property="Width" Value="100" />
        </Style>

        <Style TargetType="{x:Type TextBox}">
            <Setter Property="FontSize" Value="{Binding ElementName=SliderFont, Path=Value}" />
        </Style>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" Text="Test" />
        <Border
            Grid.Row="1"
            Background="Purple" 
            BorderBrush="Black"
            BorderThickness="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label
                    Grid.Column="0"
                    FontSize="16"
                    Content="Font Size:"/>
                <TextBox 
                    Grid.Column="1"
                    FontSize="16"
                    Text="{Binding ElementName=SliderFont, Path=Value, Mode=TwoWay}"
                    Width="50"
                    MaxLength="5" />
                <Slider 
                    Style="{DynamicResource SliderStyle}"
                    Grid.Column="2"
                    Name="SliderFont" />
            </Grid>
        </Border>
    </Grid>
</Window>

same idea but using a usercontrol.

<Window x:Class="TestApp3.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestApp3"
    Title="Window1">
    <Window.Resources>

        <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
            <Setter Property="Value" Value="10" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Interval" Value="1" />
            <Setter Property="Minimum" Value="5" />
            <Setter Property="Maximum" Value="50" />
            <Setter Property="TickFrequency" Value="0.25" />
            <Setter Property="IsSnapToTickEnabled" Value="True" />
            <Setter Property="Width" Value="100" />
        </Style>

        <Style TargetType="{x:Type TextBox}">
            <Setter Property="FontSize" Value="{Binding ElementName=SliderFont, Path=Value}" />
        </Style>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <!--<TextBox Grid.Row="0" Text="Test" />-->
        <local:myusercontrol Grid.Row="0" />
        <Border
            Grid.Row="1"
            Background="Purple" 
            BorderBrush="Black"
            BorderThickness="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label
                    Grid.Column="0"
                    FontSize="16"
                    Content="Font Size:"/>
                <TextBox 
                    Grid.Column="1"
                    FontSize="16"
                    Text="{Binding ElementName=SliderFont, Path=Value, Mode=TwoWay}"
                    Width="50"
                    MaxLength="5" />
                <Slider 
                    Style="{DynamicResource SliderStyle}"
                    Grid.Column="2"
                    Name="SliderFont" />
            </Grid>
        </Border>
    </Grid>
</Window>

The usercontrol

<UserControl x:Class="TestApp3.myusercontrol"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    <Grid>
        <TextBox Text="Test" />
    </Grid>
</UserControl>

The usercontrols textbox fontsize isnt growing at all. the reason i want to get this working is cause i'd like to put somthing like it in our themes so we wont have to worry about it later on. I've been tinkering with this for far too long. Any ideas on how to get this working would be great.

i know i can pass along the FontSize value in the usercontrol but i'd like to be able to control more than one controls FontSize.

Hope this makes sense, ~Boots

Answer 1

OK, it took me a little while, but I finally got this working.

You need to create a dependency property in your user control (this is in the code behind - C# in this case):

    public static readonly DependencyProperty UCFontSizeProperty = DependencyProperty.Register(
      "UCFontSize", typeof(double), typeof(myusercontrol));

    public double UCFontSize
    {
        get { return (double)this.GetValue(UCFontSizeProperty); }
        set { this.SetValue(UCFontSizeProperty, value); }
    }

Then in the user control XAML have:

<UserControl x:Class="TestApp3.myusercontrol"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="TextBoxUserControl"
    Height="200" Width="250">
    <Grid>
        <TextBox Text="Test" FontSize="{Binding ElementName=TextBoxUserControl, Path=UCFontSize}" x:Name="UCTextBox" />
    </Grid>
</UserControl>

Then add another Style setter:

<Style TargetType="{x:Type local:U myusercontrol}">
    <Setter Property="UCFontSize" Value="{Binding ElementName=SliderFont, Path=Value}" />
</Style>

You don't need to change how you instantiate the user control on your main page.

Answer 2

I got it to work using an XMLfile as a resource.

Just add this to your resources

<XmlDataProvider x:Key="XmlFontFile" Source="pack://application:,,,/TestApp3;component/XMLFile1.xml" />

and this to your SliderStyle

<Setter Property="Value" Value="{Binding Source={StaticResource XmlFontFile}, XPath=Style/TextBoxFontSize, Mode=TwoWay}" />

and this to your TextBoxStyle

<Setter Property="FontSize" Value="{Binding Source={StaticResource XmlFontFile}, XPath=Style/TextBoxFontSize}" />

my xmlfile looks like

<?xml version="1.0" encoding="utf-8" ?>

<Style> <TextBoxFontSize>16</TextBoxFontSize> </Style>