将数据模板和样式放置到生成的按钮

Question

我要做什么

我将添加一些 SubMenuButtons （下面的代码） 在页面的视图模型中由代码隐藏生成的 ItemControl ItemControl 放在了。我已经尝试了 2 种解决方案并给出了 2 种不同的结果。

---

1^st 我试过的解决方案

代码

这是我制作的class：

public class SubMenuButton : Button
{
    public Page TargetPage { get; set; }
    public FontAwesomeIcon Icon { get; set; }
    public string Text { get; set; }

    public SubMenuButton()
    {
        Style = App.Current.FindResource("submenuButtonStyle") as Style; 
        // comment line above for 2nd solution I've tried
    }

    public SubMenuButton(string text, Page targetPage, ICommand command, 
                                                            FontAwesomeIcon icon) : this()
    {
        Icon = icon;
        Text = text;
        TargetPage = targetPage;
        CommandParameter = targetPage;
        Command = command;
    }
}

为此 class 我还制作了一个 Style 用于显示图标和文本以及一些属性以使其更好。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
                    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
                    xmlns:fa="http://schemas.fontawesome.io/icons/"
                    xmlns:uie="clr-namespace:Provar2.Client.DesktopApp.UIElements">

    <Style x:Key="transparantButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="Width" Value="auto"/>
        <Setter Property="Height" Value="auto"/>
        <Setter Property="Margin" Value="0,5"/>
        <Setter Property="Width" Value="auto"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Cursor" Value="Hand"/>
    </Style>

    <Style x:Key="submenuButtonStyle" BasedOn="{StaticResource transparantButtonStyle}" 
           TargetType="{x:Type uie:SubMenuButton}">

        <Setter Property="CommandParameter" Value="{Binding TargetPage}" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type uie:SubMenuButton}">
                    <Canvas Height="auto">
                        <fa:FontAwesome Icon="{Binding Icon}" Width="30" Height="30"/>
                        <TextBlock Text="{Binding Text}"/>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="White" />
                <Setter Property="Foreground" Value="Black" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

这是必须生成 SubMenuButton 的地方

<ItemsControl Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" 
              HorizontalAlignment="Stretch" Background="Gray" 
              ItemsSource="{Binding SubMenuItems}" />

结果

但是对于这个解决方案我有这个例外：

BindingExpression: Text property not found on object SubMenuPageViewModel.

BindingExpression:
Path=Text; 
DataItem='SubMenuPageViewModel' (HashCode=28642977); 

Target element is TextBlock target property is Text (type String)

---

2^nd 我试过的解决方案

代码

我也试过在我的 ItemsControl.

中添加一个 属性 ItemTemplate

<ItemsControl ItemTemplate="{StaticResource submenuButtonTemplate}" Grid.Column="0" 
              Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
              Background="Green" ItemsSource="{Binding SubMenuItems}" />

我还在 SubMenuButton.

的空构造函数中对我的代码注释了一些行

并添加此数据模板

<DataTemplate x:Key="submenuButtonTemplate" DataType="{x:Type scr:SubMenuButton}">
    <Canvas Height="auto">
        <fa:FontAwesome Icon="{Binding Icon}" Width="30" Height="30"/>
        <TextBlock Text="{Binding Text}"/>
    </Canvas>
</DataTemplate>

结果

现在我没有例外，但我得到了这个：

绿色的矩形是我的ItemTemplate，2SubMenuButtons （因为我生成了2SubMenuButtons）我已经圈出来了用黄色的笔。

---

问题

你能解决我的问题吗？

Answer 1

TextBlock 尝试从 DataContext 中获取文本 属性，但后者没有。添加 RelativeSource 参数指向 Text 属于 uie:SubMenuButton

<TextBlock Text="{Binding Text, RelativeSource={RelativeSource AncestorType=uie:SubMenuButton}}"/>

如果文本实现为 DependencyProperty，它将通知更改、支持绑定等