StyledProperty and propagating changes

[CardPile]

Hi all,

I have a question on how to make a particular scenario work.

I have a user Control with a StyledProperty that controls how some of the contents gets displayed:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:CardPile.App.ViewModels"
             xmlns:v="using:CardPile.App.Views"
             xmlns:vmd="using:CardPile.App.ViewModels.Design"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600"
             x:Class="CardPile.App.Views.CardMetricsView"
             x:DataType="vm:CardMetricsViewModel"
             x:Name="root">
 
  <Design.DataContext>
    <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
    <vmd:CardMetricsViewModelDesign />
  </Design.DataContext>
 
  <ItemsControl ItemsSource="{Binding Metrics}" >
    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <UniformGrid Margin="5 0" Rows="1" IsVisible="{Binding Visible}">
          <TextBlock Grid.Column="0" Text="{Binding Metric.Description.Name}" Margin="5 2">
            <TextBlock.Styles>
              <Style Selector="v|CardMetricsView#root[HighlightImportance=true] TextBlock">
                <Setter Property="Foreground" Value="{Binding Metric.Importance, Converter={x:Static vm:CardMetricsViewModel.ImportanceConverter}}" />
              </Style>
            </TextBlock.Styles>
          </TextBlock>
          <TextBlock Grid.Column="1" Text="{Binding Metric.TextValue}" Margin="5 2" HorizontalAlignment="Right">
            <TextBlock.Styles>
              <Style Selector="v|CardMetricsView#root[HighlightImportance=true] TextBlock">
                <Setter Property="Foreground" Value="{Binding Metric.Importance, Converter={x:Static vm:CardMetricsViewModel.ImportanceConverter}}" />
              </Style>  
            </TextBlock.Styles>
          </TextBlock>
        </UniformGrid>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>
</UserControl>

using Avalonia;
using Avalonia.Controls;

namespace CardPile.App.Views;

public partial class CardMetricsView : UserControl
{
    public static readonly StyledProperty<bool> HighlightImportanceProperty = AvaloniaProperty.Register<CardMetricsView, bool>(nameof(HighlightImportance), defaultValue: true);

    public CardMetricsView()
    {
        InitializeComponent();
    }

    public bool HighlightImportance
    {
        get => GetValue(HighlightImportanceProperty);
        set => SetValue(HighlightImportanceProperty, value);
    }
}

I have put this control inside another one that also has a styled property whose value I want to use:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:CardPile.App.ViewModels"
             xmlns:v="using:CardPile.App.Views"
             xmlns:vmd="using:CardPile.App.ViewModels.Design"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600"
             x:Class="CardPile.App.Views.CardDataView"
             x:DataType="vm:CardDataViewModel"
             x:Name="root">
 
  <Design.DataContext>
    <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
    <vmd:CardDataViewModelDesign/>
  </Design.DataContext>

  <UserControl.Styles>
    <Style Selector="ToolTip">
      <Setter Property="IsVisible" Value="{Binding #root.ShowPopup}" />
    </Style>
  </UserControl.Styles>
  
  <StackPanel>
    <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
      <Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Content="{Binding CardName}" IsVisible="{Binding ShowLabel}" />
      <StackPanel Grid.Column="0" Grid.Row="1" Spacing="5" Margin="5 0">
        <Border CornerRadius="10" ClipToBounds="True">
          <Panel>
            <ToolTip.Tip>
              <v:CardMetricsView DataContext="{Binding Metrics}" />
            </ToolTip.Tip>
            <Image Width="172" Height="240" Source="{Binding CardImage^}"/>
            <Panel Height="240" Background="LightGray" IsVisible="{Binding CardImage^, Converter={x:Static ObjectConverters.IsNull}}">
              <PathIcon Height="75" Width="75" Data="{StaticResource card_placeholder}" />
            </Panel>
          </Panel>
        </Border>
      </StackPanel>
      <Border Grid.Column="1" Grid.Row="1" CornerRadius="10" ClipToBounds="True" Background="Gray">
        <v:CardMetricsView DataContext="{Binding Metrics}" HighlightImportance="{Binding !#root.ShowPopup}">
          <v:CardMetricsView.IsVisible>
            <MultiBinding Converter="{x:Static BoolConverters.And}">
              <MultiBinding.Bindings>
                <Binding Path="#root.ShowMetrics"/>
                <Binding Path="AnyMetricVisible"/>
              </MultiBinding.Bindings>
            </MultiBinding>
          </v:CardMetricsView.IsVisible>
        </v:CardMetricsView>
      </Border>
    </Grid>
  </StackPanel>
</UserControl>

using Avalonia;
using Avalonia.Controls;

namespace CardPile.App.Views;

public partial class CardDataView : UserControl
{
    public static readonly StyledProperty<bool> ShowMetricsProperty = AvaloniaProperty.Register<CardDataView, bool>(nameof(ShowMetrics), defaultValue: true);

    public static readonly StyledProperty<bool> ShowPopupProperty = AvaloniaProperty.Register<CardDataView, bool>(nameof(ShowMetrics), defaultValue: false);

    public CardDataView()
    {
        InitializeComponent();
    }

    public bool ShowMetrics
    {
        get => GetValue(ShowMetricsProperty);
        set => SetValue(ShowMetricsProperty, value);
    }

    public bool ShowPopup
    {
        get => GetValue(ShowPopupProperty);
        set => SetValue(ShowPopupProperty, value);
    }
}

What seems to be happening is when the CardDataView is created it creates the CardMetricsView with using the default value for ShowPopup to calculate the value of HighlightImportance. So far so good... But when the ShowPopup gets set by a top level control that does not propagate to HighlightImportance.

<!--....-->
          <Expander Grid.Row="3" VerticalAlignment="Top" Width="{Binding #ContentContainer.Bounds.Width}" Margin="0, 2">
            <Expander.Header>
              <TextBlock FontSize="18" FontWeight="DemiBold">Current deck</TextBlock>
            </Expander.Header>
            <ItemsControl ItemsSource="{Binding CardsInDeck}">
              <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                  <WrapPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
              </ItemsControl.ItemsPanel>
              <ItemsControl.ItemTemplate>
                <DataTemplate>
                  <v:CardDataView DataContext="{Binding}" ShowMetrics="false" ShowPopup="true" />
                </DataTemplate>
              </ItemsControl.ItemTemplate>
            </ItemsControl>
          </Expander>
<!--...-->

My guess is that there is INotifyPropertyChanged missing, but I can't see to find the canonical way to implement this. Especially since UserControl already implements this, but makes it hard to hook into.

Any advice?

[timunie]

Check Avalonia.Samples RatingControl

[CardPile]

Thank you! I changed them to Direct properties since they seemed more appropriate and thanks to SetAndRaise everything started working. Yay!