WPF/XAML: Switch style based on custom property

Question

I have a WPF user control with following xaml

<UserControl x:Class="Scheduler.ItemBox"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="40" d:DesignWidth="150" MinHeight="40" MinWidth="75" VerticalAlignment="Top">
 <Border BorderBrush="CornflowerBlue" BorderThickness="1" CornerRadius="5" Name="border">
     <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="#FFC0D3EA" Offset="1"/>
        </LinearGradientBrush>
    </Border.Background>
    <Grid Margin="2,0" Name="grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="20" MaxHeight="20" MinHeight="20" />
            <RowDefinition MinHeight="20" />
        </Grid.RowDefinitions>
        <Label Content="00:00" FontWeight="Bold" Name="FromTime" Padding="5,0,0,0" VerticalContentAlignment="Center" />
        <Label Content="01:30" Grid.Column="1" HorizontalContentAlignment="Right" Name="ToTime" Padding="0,0,5,0" VerticalContentAlignment="Center" />
        <TextBlock Grid.ColumnSpan="2" Grid.Row="1" Name="MovieTitle" Padding="5,0" Text="item1" TextWrapping="Wrap" />
    </Grid>
</Border>

And the user control class looks like this

Namespace Scheduler
Public Class ItemBox

    Public Property Selected As Boolean

End Class

End Namespace

Now what i would like to do is, when i change the property Selected to True is the following: - set border borderbrush to black - set border borderthickness to 2 - set grid margin to 1

I would like to accomplish this by defining a "selected" style in the usercontrol that overrides the default styles when the selected property is set to True.

I know it has something to do with a style trigger and defining a custom attached property. But i can't seem to make it work the way i want to.

Hi, you'd normally use VisualStateManager for doing that type of things. Have a look at: windowsclient.net/wpf/wpf35/… One thing in advance - mind the difference between GoToState and GoToElementState:) — user572559

CodeNaked CodeNaked · Accepted Answer · 2011-03-04T01:28:38

The first issue is your Selected property is not "observable". This means that anything that is watching the property for changes (such as a Style Trigger or a Binding), will never be notified that it changed.

You would either need to implement INotifyPropertyChanged or make your property a Dependency Property. It doesn't need to be an attached property, as you can bind to the property using RelativeSource, if needed.

The second issue is that your UserControl doesn't have a Style, at least not by default. Even if you set the UserControl.Style property, you cannot easily change the content. This is something that is more easily done using a custom Control, and is your best bet to accomplish what you want.

WPF/XAML: Switch style based on custom property

1 Answers