Nội dung kiểu dáng thông qua bộ cài đặt v ContentTemplate

Question

Xaml cho kiểu đầu tiên hoạt động như tôi muốn, tạo ra một nút có hình chữ nhật Wingding sử dụng bộ định vị để bố trí nội dung và thuộc tính của nó. Phiên bản thứ hai của phong cách này đang cố gắng làm điều tương tự nhưng với một DataTemplate cho Nội dung, nhưng nó chỉ hiển thị kiểu của một DataTemplate (tức là System.Windows.DataTemplate).

1. Tại sao phiên bản 2 không hiển thị cùng nội dung với phiên bản 1?
2. Giả sử bản sửa lỗi là không đáng kể, một phiên bản của kiểu này có thích hợp hơn kiểu khác vì bất kỳ lý do gì ngoài sở thích cá nhân không?

LƯU Ý: Tôi thấy các ràng buộc và kích hoạt trong trường hợp có cái gì đó trong đó đang ảnh hưởng đến nội dung, nhưng nó chỉ là phần đầu tiên của phong cách khác nhau

Chúc mừng,
Berryl

Phong cách 1

Displays:

<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" > 
    <Setter Property="Content" Value="a" /> 
    <Setter Property="Foreground" Value="Navy" /> 
    <Setter Property="FontFamily" Value="Wingdings 3" /> 
    <Setter Property="FontWeight" Value="Bold" /> 
    <Setter Property="FontSize" Value="18" /> 
    <Setter Property="Width" Value="30" /> 
    <Setter Property="Height" Value="Auto" /> 

    <!--What makes it an Edit button--> 
    <Setter Property="Command" Value="{Binding ActivateThisSatelliteVmCommand}"/> 
    <Setter Property="ToolTip"> 
     <Setter.Value> 
      <TextBlock> 
       <TextBlock.Text> 
        <Binding Path="HeaderLabel" StringFormat="{resx:Resx ResxName=Smack.Core.Presentation.Resources.MasterDetail, Key=Item_Edit_Label}"/> 
       </TextBlock.Text> 
      </TextBlock> 
     </Setter.Value> 
    </Setter> 

    <!-- WHen its available --> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="theBorder" CornerRadius="4"> 
        <ContentPresenter x:Name="theContent" VerticalAlignment="Center" HorizontalAlignment="Center" /> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="False"> 
         <Setter TargetName="theContent" Property="Visibility" Value="Hidden"/> 
         <Setter TargetName="theBorder" Property="Background" Value="Transparent"/> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="theContent" Property="Visibility" Value="Visible"/> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="True"> 
         <Setter TargetName="theContent" Property="Visibility" Value="Visible"/> 
         <Setter TargetName="theBorder" Property="Background" Value="Orange"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Phong cách 2

Displays "System.Windows.DataTemplate"

<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" > 
    <Setter Property="Content"> 
     <Setter.Value> 
      <DataTemplate> 
       <TextBlock Text="a" FontFamily="Wingdings 3" FontWeight="Bold" FontSize="18" Foreground="Navy" /> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 

    <!--What makes it an Edit button--> 
    <Setter Property="Command" Value="{Binding ActivateThisSatelliteVmCommand}"/> 
    <Setter Property="ToolTip"> 
     <Setter.Value> 
      <TextBlock> 
       <TextBlock.Text> 
        <Binding Path="HeaderLabel" StringFormat="{resx:Resx ResxName=Core.Presentation.Resources.MasterDetail, Key=Item_Edit_Label}"/> 
       </TextBlock.Text> 
      </TextBlock> 
     </Setter.Value> 
    </Setter> 

    <!-- When its available --> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="theBorder" CornerRadius="4"> 
        <ContentPresenter x:Name="theContent" VerticalAlignment="Center" HorizontalAlignment="Center" /> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="False"> 
         <Setter TargetName="theContent" Property="Visibility" Value="Hidden"/> 
         <Setter TargetName="theBorder" Property="Background" Value="Transparent"/> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="theContent" Property="Visibility" Value="Visible"/> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="True"> 
         <Setter TargetName="theContent" Property="Visibility" Value="Visible"/> 
         <Setter TargetName="theBorder" Property="Background" Value="Orange"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

tài sản Content của bạn được thiết lập để một DataTemplate

DataTemplates có nghĩa là để được sử dụng với Template tài sản, và không trực tiếp đưa vào VisualTree qua thuộc tính Content

Thay đổi Style Setter của bạn thành đặt ContentTemplate thay vì Content và nó sẽ làm việc tốt

<Setter Property="ContentTemplate"> 
    <Setter.Value> 
     <DataTemplate> 
      <TextBlock Text="a" FontFamily="Wingdings 3" FontWeight="Bold" FontSize="18" Foreground="Navy" /> 
     </DataTemplate> 
    </Setter.Value> 
</Setter> 

Đối với câu hỏi thứ hai của bạn, tôi thích là người đầu tiên vì nó đơn giản hơn, và tôi nghĩ rằng nó có thể chứa các thành phần ít trong cây thị giác (tôi phải đúp kiểm tra xem)