Question

我有一个名为MenuButton的按钮子类。

public class MenuButton : Button
{
    public string Caption
    {
        get { return (string)GetValue(CaptionProperty); }
        set { SetValue(CaptionProperty, value); }
    }
    public static readonly DependencyProperty CaptionProperty =
        DependencyProperty.Register("Caption", typeof(string), typeof(MenuButton), new UIPropertyMetadata(null));


    public UserControl Icon
    {
        get { return (UserControl)GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }
    public static readonly DependencyProperty IconProperty =
        DependencyProperty.Register("Icon", typeof(UserControl), typeof(MenuButton),
            new PropertyMetadata(null));

}

在样式中，我想显示使用SVG文件中的路径创建的图标。我创建了一个包含图标的XAML的用户控件：

<UserControl x:Class="WpfApplication1.Views.ScopeIcon"
             .
             .
             .
             >

    <Viewbox Height="55"
             Width="55">

        <Grid>
            <Path Fill="LightBlue" Data="M98.219,48.111C97..."/>
            <Path Fill="LightBlue" Data="M98.219,46.948C97...."/>
        </Grid>

    </Viewbox>
</UserControl>

这就是风格：

<Style TargetType="Button"
        x:Key="TestButtonStyle">

    <Setter Property="Height" Value="140"/>
    <Setter Property="Width" Value="195"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:MenuButton}">

                <Border x:Name="TheBorder">

                    <Grid>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="50*"/>
                            <RowDefinition Height="50*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <ContentPresenter Grid.Row="0"/>  <===== THE USER CONTROL WILL GO HERE

                        <TextBlock Grid.Row="1"
                                Grid.Column="0"
                                Text="{TemplateBinding Caption}"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Top"
                                Margin="5"
                                Foreground="White"
                                FontSize="14"
                                TextAlignment="Center"
                                TextWrapping="WrapWithOverflow"/>

                    </Grid>

                </Border>

            </ControlTemplate>

        </Setter.Value>
    </Setter>

</Style>

我会在这里设置：

<ListBox Grid.Row="0"
            ItemsSource="{Binding MainTools}"                         >

    <ListBox.ItemTemplate>
        <DataTemplate>
            <controls:MenuButton Caption="{Binding Caption}"
                                    Margin="2"
                                    Width="100"
                                    Style="{StaticResource TestButtonStyle}"
                                    VerticalAlignment="Top"
                                    Command="{Binding Path=ButtonClick}"
                                    CommandParameter="{x:Static enums:Tabs.Oscilloscope}"
                                    Icon=""/>   <============= HOW DO I PUT THE SCOPEICON USER CONTROL HERE?



        </DataTemplate>
    </ListBox.ItemTemplate>

</ListBox>

我实际上是在尝试嵌套用户控件，但我想在XAML中告诉按钮，用于其图标的UserControl。谢谢

Answer 1

首先，您需要在Content上将样式更新为 set ContentPresenter属性，就像Text TextBlock属性一样}。

<ContentPresenter Grid.Row="0" Content="{TemplateBinding Icon}"/>

然后，在DataTemplate中的Icon上设置MenuButton，将DataTemplate中的MenuButton元素更新为：

<controls:MenuButton Caption="Caption"
                     Margin="2"
                     Width="100"
                     Style="{StaticResource TestButtonStyle}"
                     VerticalAlignment="Top"
                     Command="{Binding Path=ButtonClick}"
                     CommandParameter="{x:Static enums:Tabs.Oscilloscope}">
    <controls:MenuButton.Icon>
        <views:ScopeIcon />
    </controls:MenuButton.Icon>
</controls:MenuButton>

WPF依赖项属性绑定到用户控件

1 个答案: