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

Question

我要做什么

我将在SubMenuButton上添加一些ItemControl s （下面的代码），该代码由ItemControl生成放在上面。我尝试了2种解决方案并给出了2种不同的结果。

1 ^st 解决方案我已尝试

代码

以下是我所做的课程：

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;
    }
}

对于本课程，我还制作了一个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： SubMenuPageViewModel属性。

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

     

目标元素为TextBlock目标属性为Text （类型String）

2 ^nd 解决方案我已尝试

代码

我还试图将ItemTemplate属性添加到ItemsControl。

<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，2 SubMenuButton s （因为我生成了2 SubMenuButton s 我用黄色圈出来了笔

问题

你能解决我的问题吗？

Answer 1

TextBlock尝试从DataContext获取Text属性，而DataContext没有它。添加RelativeSource参数以指示Text属于uie:SubMenuButton

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

如果Text实现为DependencyProperty，它将通知有关更改，支持绑定等