Search code examples
c#xamluwpwin-universal-appvisualstatemanager

UWP Setter custom DependencyProperty


I have a custom control called IconTextButton which has defined some properties.

public sealed partial class IconTextButton : UserControl
{
    public string Label
    {
        get => (string)GetValue(LabelProperty);
        set => SetValue(LabelProperty, value);
    }
    public static readonly DependencyProperty LabelProperty = DependencyProperty.Register("Label",
                                                                                          typeof(string),
                                                                                          typeof(IconTextButton),
                                                                                          new PropertyMetadata(""));
    public IconElement Icon { get; set; }
    public IconTextButtonLabelPosition LabelPosition
    {
        get => (IconTextButtonLabelPosition)GetValue(LabelPositionProperty);
        set
        {
            SetValue(LabelPositionProperty, value);
            Grid.SetColumn(LabelTextBlock, value == IconTextButtonLabelPosition.Left ? 0 : 2);
        }
    }
    public static readonly DependencyProperty LabelPositionProperty = DependencyProperty.Register("LabelPosition", 
                                                                                                  typeof(IconTextButtonLabelPosition), 
                                                                                                  typeof(IconTextButton), 
                                                                                                  new PropertyMetadata(IconTextButtonLabelPosition.Left));
    public Thickness IconTextMargin
    {
        get => (Thickness)GetValue(IconTextMarginProperty);
        set => SetValue(IconTextMarginProperty, value);
    }
    public static readonly DependencyProperty IconTextMarginProperty = DependencyProperty.Register("IconTextMargin",
                                                                                                   typeof(Thickness),
                                                                                                   typeof(IconTextButton),
                                                                                                   new PropertyMetadata(null));
    public Brush IconBackground
    {
        get { return (Brush)GetValue(IconBackgroundProperty); }
        set { SetValue(IconBackgroundProperty, value); }
    }
    public static readonly DependencyProperty IconBackgroundProperty = DependencyProperty.Register("IconBackground",
                                                                                          typeof(Brush),
                                                                                          typeof(IconTextButton),
                                                                                          new PropertyMetadata(null));

    public double IconRadius
    {
        get => (double)GetValue(IconRadiusProperty);
        set
        {
            SetValue(IconRadiusProperty, value);
            IconBackgroundBorder.Width = value * 2;
            IconBackgroundBorder.Height = value * 2;
            IconBackgroundBorder.CornerRadius = new CornerRadius(value);
        }
    }
    public static readonly DependencyProperty IconRadiusProperty = DependencyProperty.Register("IconRadius",
                                                                                          typeof(double),
                                                                                          typeof(IconTextButton),
                                                                                          new PropertyMetadata(15));
}

And I want to change its property according to its visual state but it is not changed. Why is that?

    <VisualState.Setters>
        <Setter Target="LocalShuffleItem.Label" Value="" />
        <Setter Target="LocalListViewItem.Label" Value="" />
        <Setter Target="LocalGridViewItem.Label" Value="" />
        <Setter Target="LocalShuffleItem.IconTextMargin" Value="0" />
        <Setter Target="LocalListViewItem.IconTextMargin" Value="0" />
        <Setter Target="LocalGridViewItem.IconTextMargin" Value="0" />
    </VisualState.Setters>

Solution

  • The problem is Label and IconTextMargin is not dependency property in your code.

    The problem is that the default x:Bind model is OneTime. The property's value will not be changed when you edit their value in VisualState. Please check IconTextButton class and change x:Bind mode as OneWay.

    <TextBlock
        x:Name="LabelTextBlock"
        Grid.Column="2"
        Margin="{x:Bind IconTextMargin,Mode=OneWay}"
        VerticalAlignment="Center"
        AutomationProperties.AccessibilityView="Raw"
        FontSize="{x:Bind FontSize}"
        FontWeight="{x:Bind FontWeight}"
        Foreground="{x:Bind Foreground}"
        Text="{x:Bind Label, Mode=OneWay}"
        TextAlignment="Center"
        TextWrapping="Wrap" />