question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

StyledProperty doesn't do anything?

See original GitHub issue

I’m trying to use a StyledProperty in my UserControl and the getters/setters never seem to be triggered. I saw #2280 and I added the StyleKey suggested in that issue but still no luck. Here’s my minimum example. Any advice would be appreciated.

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AvaloniaApplication8"
        mc:Ignorable="d" Width="150" Height="100"
        x:Class="AvaloniaApplication8.MainWindow"
        Title="AvaloniaApplication8">
  <StackPanel>
    <local:SplitButton Width="75" Options="{Binding SplitButtonOptions}" Margin="5"/>
  </StackPanel>
</Window>

MainWindow.axaml.cs

using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using System.Collections.ObjectModel;

namespace AvaloniaApplication8
{
    public class MainWindow : Window
    {
        public MainWindow()
        {
            this.DataContext = this;
            InitializeComponent();
        }

        private void InitializeComponent()
        {
            AvaloniaXamlLoader.Load(this);
        }

        public ObservableCollection<string> SplitButtonOptions //The getter here is never called
        {
            get
            {
                return new ObservableCollection<string>(new[] { "Today", "Yesterday", "Tomorrow" });
            }
        }
    }
}

SplitButton.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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="450"
             x:Class="AvaloniaApplication8.SplitButton">
  <StackPanel>
    <Button Click="OpenContextMenu">
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="Today" VerticalAlignment="Center" Margin="5,0"/>
        <Polygon Points="0,2 5,10 10,2" VerticalAlignment="Center"
                 Stroke="{Binding $parent[Window].Foreground}" Fill="{Binding $parent[Window].Foreground}" />
      </StackPanel>
    </Button>
    <Popup x:Name="popup" StaysOpen="False" PlacementMode="Bottom" PlacementTarget="{Binding #parent[Button]}">
      <ItemsControl x:Name="popupItemsList" Items="{Binding Options}">
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding .}" Margin="5"/>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
    </Popup>
  </StackPanel>
</UserControl>

SplitButton.axaml.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
using Avalonia.Styling;
using System;
using System.Collections.Generic;

namespace AvaloniaApplication8
{
    public class SplitButton : Panel, IStyleable
    {
        Type IStyleable.StyleKey => typeof(SplitButton);

        public SplitButton()
        {
            this.DataContext = this;
            this.InitializeComponent();
        }

        private void InitializeComponent()
        {
            AvaloniaXamlLoader.Load(this);
        }

        public void OpenContextMenu(object sender, RoutedEventArgs args)
        {
            this.FindControl<Popup>("popup").Open();
        }

        public static readonly StyledProperty<IEnumerable<string>> OptionsProperty =
            AvaloniaProperty.Register<SplitButton, IEnumerable<string>>(nameof(Options));

        public IEnumerable<string> Options //The getter and setter here never seem to be called
        {
            get
            {
                return GetValue(OptionsProperty);
            }
            set
            {
                SetValue(OptionsProperty, value);
            }
        }
    }
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
ahoppercommented, Dec 24, 2020

The problem is you are setting DataContext to the root of the control which breaks the binding (as it is now relative to the internals of the control and not the owner), if you set the data context of the StackPanel to ‘this’ it works. It might be worth reading up on MVVM as this tends not to be an issue once you get the hang of it.

1reaction
ahoppercommented, Dec 24, 2020

just looked a bit harder and you seem to be mixing usercontrols with templated controls.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using styled components with Typescript, prop does not ...
I get warnings that: Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, ...
Read more >
Strongly typed theme property · Issue #1589
So, in my custom styled component, everything seems to be fine, ... But it doesn't seem to work fine when using with a...
Read more >
The styled-components Happy Path
If you work with styled-components, or a similar tool like Emotion, my hope is that this article will help you get the most...
Read more >
FAQs
What do I need to do to migrate to v6? First, let's start by updating the necessary packages to their latest versions. If...
Read more >
HTMLElement: style property - Web APIs | MDN
The read-only style property of the HTMLElement returns the inline style of an element in the form of a live CSSStyleDeclaration object that ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found