Home > OS >  WPF RibbonTabHeader DataTrigger doesn´t work with ViewModel property
WPF RibbonTabHeader DataTrigger doesn´t work with ViewModel property

Time:02-21

I have a Ribbon Control and this style for the tab header. Both are defined in the PartRibbonMenuView.

The Style is defined as below:

<Style TargetType="{x:Type RibbonTabHeader}" x:Key="RibbonTabHeader" BasedOn="{StaticResource {x:Type RibbonTabHeader}}">
    <Setter Property="Template">
        <Setter.Value>                    
            <ControlTemplate TargetType="RibbonTabHeader">
                <Border x:Name="TabHeader" BorderThickness="1,1,1,0" CornerRadius="6,6,0,0" Margin="1,0" BorderBrush="#FF707070">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0"/>
                </Border>                        
                <ControlTemplate.Triggers>                            
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="TabHeader" Property="BorderThickness" Value="1,1,1,0" />
                        <Setter TargetName="TabHeader" Property="Background" Value="#3D26A0DA" />
                        <Setter TargetName="TabHeader" Property="BorderBrush" Value="#FF1A5AAB" />
                    </Trigger>
                    
                    <Trigger Property="IsRibbonTabSelected" Value="True">
                        <Setter TargetName="TabHeader" Property="BorderThickness" Value="2,2,2,0" />
                        <Setter TargetName="TabHeader" Property="Background" Value="WhiteSmoke" />
                        <Setter TargetName="TabHeader" Property="BorderBrush" Value="#FF1A5AAB" />
                    </Trigger>

                    <DataTrigger Binding="{Binding SketchIsActive}" Value="True">
                        <Setter TargetName="TabHeader" Property="BorderThickness" Value="1.5,1.5,1.5,0" />
                        <Setter TargetName="TabHeader" Property="Background" Value="red" />
                        <Setter TargetName="TabHeader" Property="BorderBrush" Value="Green" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I´ve tried using the style in two ways:

<Ribbon TabHeaderStyle="{StaticResource RibbonTabHeader}" IsSynchronizedWithCurrentItem="True" Background="WhiteSmoke"> ...<Ribbon/>

And also in the opening of the RibbonTab:

<RibbonTab Header="Sketch" TabIndex="1" HeaderStyle="{StaticResource RibbonTabHeader}"> ...<RibbonTab/>

And the property of the PartViewModel

public bool SketchIsActive
{
    get { return sketchIsActive; }
    set
    {
        sketchIsActive = value;
        RaisePropertyChanged(nameof(SketchIsActive));
    }
}

To make sure that the property returns True I´ve done:

public bool SketchIsActive
{
    get { return True; }
    set
    {
        sketchIsActive = value;
        RaisePropertyChanged(nameof(SketchIsActive));
    }
}

But still doesn´t work.

Finally the implementation of the PropertyChanged event:

public void RaisePropertyChanged(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;

The Data Context is set by:

<Grid Grid.Row="0">
    <Grid.Resources>
        <DataTemplate DataType="{x:Type vms:HomeTabViewModel}">
            <views:HomeRibbonMenuView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type vms:PartViewModel}">
            <views:PartRibbonMenuView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type vms:AssemblyViewModel}">
            <views:AssemblyRibbonMenuView/>
        </DataTemplate>
    </Grid.Resources>

    <ContentControl Grid.Row="0" Content="{Binding CurrentViewModel}"/>
</Grid> 

This part of the code has its own ViewModel called "MainViewModel". This MainViewModel has a property called CurrentViewModel which is used for navigation. So the PartRibbonMenuView has the DataContext of the PartViewModel.

The styles of the triggers work. However, the DataTrigger doesn't work. What's going on? How can I have another style for the RibbonTabHeader when I set the ViewModel property to True?

CodePudding user response:

It's unclear what the DataContext of your RibbonTabHeader really is, but this binding should work assuming PartRibbonMenuView is a UserControl that has a PartViewModel as its DataContext:

<DataTrigger Binding="{Binding DataContext.SketchIsActive,
    RelativeSource={RelativeSource AncestorType=UserControl}}" Value="True">

Setting the RelativeSource property of a binding lets you bind to a property of a certain ancestor type in the visual tree. Please refer to the docs for more information.

  • Related