locked
XAML - Is it possible to use a binding within a Style?

    Question

  • [Apologies, I posted this to the incorrect forum earlier, reposting here from the original source here ]

    Is it possible to use a binding within a Style? - it looks like it should be, but then I created this sample and it doesn't work as expected.  There should be two rectangles, both bound to the slider control and both changing at the same time, but in fact only the first one appears to be bound, although other properties of the style propagate to the second one.

    Is what I am trying to do possible? (my aim: have the binding in a style so I can change a lot of elements at the same time via one slider)

    Here is the code:

        <Grid Background="#FF87873D">
    
            <StackPanel>
                <StackPanel.Resources>
                    <Style x:Key="myTestRectangleStyle" TargetType="Rectangle">
                        <Setter Property="Fill" Value="DarkBlue" />
                        <Setter Property="Margin" Value="10,10" />
                        <Setter Property="Height" Value="30" />
                        <Setter Property="Width" Value="{Binding ElementName=slider1, Path=Value}" />
                    </Style>
                </StackPanel.Resources>
    
                <Rectangle Width="{Binding ElementName=slider1, Path=Value}" Fill="Black" Margin="10,10" Height="30"/>
    
                <Rectangle Style="{StaticResource myTestRectangleStyle}"/>
    
                <Slider Name="slider1" Minimum="20" Maximum="200" Margin="20,0"/>
            </StackPanel>
        </Grid>
    

    Friday, July 11, 2014 6:07 PM

Answers

  • Short answer: No, bindings are not supported on Style setters in Windows Store Apps like they are in WPF, i.e. you cannot bind to the Value property of the Slider in the Style.

    You should remove the setter for the Width property from the style and set it locally:

    <StackPanel>
                <StackPanel.Resources>
                    <Style x:Key="myTestRectangleStyle" TargetType="Rectangle">
                        <Setter Property="Fill" Value="DarkBlue" />
                        <Setter Property="Margin" Value="10,10" />
                        <Setter Property="Height" Value="30" />
                    </Style>
                </StackPanel.Resources>
    
                <Rectangle Width="{Binding ElementName=slider1, Path=Value}" Fill="Black" Margin="10,10" Height="30"/>
    
                <Rectangle x:Name="rect" Style="{StaticResource myTestRectangleStyle}"  Width="{Binding ElementName=slider1, Path=Value}"/>
    
                <Slider Name="slider1" Minimum="20" Maximum="200" Margin="20,0"/>
            </StackPanel>
    

    • Marked as answer by Tofa Sunday, July 13, 2014 9:49 PM
    Saturday, July 12, 2014 7:50 PM

All replies

  • Just to add, it was suggested I try setting the DataContext, so I amended the above to have the last property setter line replaced with the below, but with no success - is the below the correct format for DataContext setting within a style? (I've searched for examples of DataContext use within a style but not really found much)

    <Setter Property="DataContext" Value="{Binding ElementName=slider1}" />
    <Setter Property="Width" Value="{Binding Path=DataContext.Value}" />

    Saturday, July 12, 2014 10:14 AM
  • Short answer: No, bindings are not supported on Style setters in Windows Store Apps like they are in WPF, i.e. you cannot bind to the Value property of the Slider in the Style.

    You should remove the setter for the Width property from the style and set it locally:

    <StackPanel>
                <StackPanel.Resources>
                    <Style x:Key="myTestRectangleStyle" TargetType="Rectangle">
                        <Setter Property="Fill" Value="DarkBlue" />
                        <Setter Property="Margin" Value="10,10" />
                        <Setter Property="Height" Value="30" />
                    </Style>
                </StackPanel.Resources>
    
                <Rectangle Width="{Binding ElementName=slider1, Path=Value}" Fill="Black" Margin="10,10" Height="30"/>
    
                <Rectangle x:Name="rect" Style="{StaticResource myTestRectangleStyle}"  Width="{Binding ElementName=slider1, Path=Value}"/>
    
                <Slider Name="slider1" Minimum="20" Maximum="200" Margin="20,0"/>
            </StackPanel>
    

    • Marked as answer by Tofa Sunday, July 13, 2014 9:49 PM
    Saturday, July 12, 2014 7:50 PM
  • Thanks for the answer, been scratching my head over that for a while!
    Sunday, July 13, 2014 9:51 PM