如何從WPF中的樣式ControlTemplate引用父控件？

Question

我有一個簡單的標籤控件樣式。我想用一個按鈕在樣式中定義一個控件模板，該按鈕可以被點擊並將標籤的可見性屬性設置爲「隱藏」。事情是這樣的：

<Style x:Key="MessageLabel_WithCloseButton" TargetType="{x:Type Label}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Label}"> 
       <Border BorderThickness="1" Padding="4" CornerRadius="3" 
         BorderBrush="Gray" Background="#FFA11616"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="Auto" /> 
         </Grid.ColumnDefinitions> 
         <ContentPresenter Grid.Column="0"/> 
         <Button Grid.Column="1" Width="16" Height="16" Padding="2" FontSize="9" Content="X"> 
         <!-- THIS IS WRONG! HOW TO CREATE A TRIGGER FOR THIS BUTTON 
          HERE AND HOW TO REFER TO THE LABEL? --> 
          <Button.Triggers> 

           <Trigger Property="Button.IsPressed" Value="True"> 
            <Setter Property="Visibility" Value="Hidden" /> 
           </Trigger> 
          </Button.Triggers> 
         </Button> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

的問題是我不知道如何處理點擊與觸發器以及如何設置包含按鈕標籤的屬性。

謝謝。

Answer 1

你可以用它代替普通按鈕切換按鈕，然後只用了觸發的財產器isChecked：

<Style x:Key="MessageLabel_WithCloseButton" TargetType="{x:Type Label}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Label}"> 
       <Border BorderThickness="1" Padding="4" CornerRadius="3" 
       BorderBrush="Gray" Background="#FFA11616"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="Auto" /> 
         </Grid.ColumnDefinitions> 
         <ContentPresenter Grid.Column="0"/> 
         <ToggleButton x:Name="CloseButton" Grid.Column="1" Width="16" Height="16" Padding="2" FontSize="9" Content="X"/> 
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger SourceName="CloseButton" Property="IsChecked" Value="True"> 
         <Setter Property="Visibility" Value="Hidden" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 2

我用Blend 4創作了這個。基本上你想要在的按鈕上處理「PreviewMouseButtonUp」事件。 EventTrigger將啓動一個Storyboard，它將UIElement.Visibility屬性設置爲可視化樹頂部的「隱藏」，以用於標籤的樣式。

要控制按鈕中的內容，您可以使用標籤控件上的Tag屬性。否則，您將不得不創建另一個依賴屬性，這意味着繼承Label。

裏面的風格的話，<Button/>看起來是這樣的：

<Button x:Name="button" Grid.Column="1" Padding="2" 
    FontSize="9" 
    Content="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}"/> 

...因爲你可以將任何東西放入一個Tag屬性，你可以這樣做：

<Label x:Name="label" Content="Label" 
     Style="{DynamicResource MessageLabel_WithCloseButton}"> 
     <Label.Tag> 
      <StackPanel> 
       <TextBlock>WOOT</TextBlock> 
       <TextBlock>WOOT</TextBlock> 
      </StackPanel> 
     </Label.Tag> 
    </Label> 

這裏一個修改完整的樣式（我也修改了一些東西，以便更好地自動調整大小：

<Style x:Key="MessageLabel_WithCloseButton" TargetType="{x:Type Label}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Label}"> 
        <ControlTemplate.Resources> 
         <Storyboard x:Key="OnClick1"> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="border"> 
           <DiscreteObjectKeyFrame KeyTime="0"> 
            <DiscreteObjectKeyFrame.Value> 
             <Visibility>Hidden</Visibility> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </ControlTemplate.Resources> 
        <Border x:Name="border" BorderThickness="1" Padding="4" CornerRadius="3" 
        BorderBrush="Gray" Background="#FFA11616"> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*" /> 
           <ColumnDefinition Width="Auto" /> 
          </Grid.ColumnDefinitions> 
          <ContentPresenter Grid.Column="0" VerticalAlignment="Center" Margin="0,0,3,0"/> 
          <Button x:Name="button" Grid.Column="1" Padding="2" FontSize="9" Content="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}"/> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 
         <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp" SourceName="button"> 
          <BeginStoryboard x:Name="OnClick1_BeginStoryboard" Storyboard="{StaticResource OnClick1}"/> 
         </EventTrigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

請注意，EventTrigger位於您的樹上ControlTemplate上，而不是Button上。但這可能只是Blend生成代碼的方式。