如何在左侧放置扩展器人字形？

Question

默认情况下，扩展器人字形位于右侧：

<Expander
     Header="This text is in the header"
     Content="This is in the content"/>

如何使人字形位于 header 文本的左侧？

查看 Expander class docs 我找不到有前途的 ExpanderChevron 样式。

查看实时可视化树，我可以看到人字形位于网格的第二列中。我试图通过样式覆盖该列，但无法弄清楚。

Answer 1

你有两个选择。

第一个选项是创建自定义模板。您可以从 GitHub 复制 ToggleButton 的默认模板并根据您的要求进行编辑。

第二个选项是创建您自己的自定义 Expander 控件以扩展现有控件并以编程方式移动元素：

public class CustomExpander : Expander
{
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        ToggleButton tb = GetTemplateChild("ExpanderHeader") as ToggleButton;
        if (tb != null)
            tb.Loaded += TbLoaded;
    }

    private void TbLoaded(object sender, RoutedEventArgs e)
    {
        ToggleButton tb = (ToggleButton)sender;
        tb.Padding = new Thickness(0, 0, 16, 0);
        tb.Loaded -= TbLoaded;
        ContentPresenter cp = FindVisualChild<ContentPresenter>(tb);
        Border border = FindVisualChild<Border>(tb);
        if (cp != null && border != null)
        {
            Grid.SetColumn(cp, 1);
            Grid.SetColumn(border, 0);
            border.Margin = new Thickness(8, 0, 20, 0);
        }
    }

    private static T FindVisualChild<T>(DependencyObject visual) where T : DependencyObject
    {
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(visual); i++)
        {
            DependencyObject child = VisualTreeHelper.GetChild(visual, i);
            if (child != null)
            {
                T correctlyTyped = child as T;
                if (correctlyTyped != null)
                    return correctlyTyped;

                T descendent = FindVisualChild<T>(child);
                if (descendent != null)
                    return descendent;
            }
        }

        return null;
    }
}

不要忘记更新您的 XAML 标记以使用您的自定义控件：

<local:CustomExpander Header="This text is in the header" Content="This is in the content" />

如何在左侧放置扩展器人字形？

How to place expander chevron on the left?

xaml

expander

winui-3