ユーザーコントロールにバインドされたWPF依存プロパティー

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> 

を私は基本的にしようとしていますユーザーコントロールを入れ子にするが、そのアイコンに使用するUserControlをXAMLのボタンに伝えたい。 が

Answer 1

はまずありがとう、あなたはにあなたのスタイルを更新する必要がありますが、TextBlock上TextプロパティのためにしたあなたのContentPresenterと同じようにContentプロパティを設定します。

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

そして、その後のようなものにするDataTemplateであなたのメニューボタン要素を更新し、あなたのDataTemplateでMenuButtonにIconを設定するには：

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