2016-10-29 30 views
0

ItemTemplate用於ItemsControl我有在頁腳我有幾個按鈕在其上我已增加了幾個ContentControl S(報頭和報尾)的Xaml樣式不應用於所有按鈕

一種風格,但是內容屬性由樣式設置僅在ItemsControl的第一個項目,而不是所有的人都上的按鈕應用

ItemsControl的XAML

<ItemsControl ItemsSource="{Binding Posts}" ScrollViewer.VerticalScrollBarVisibility="Auto" 
       Margin="20"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Grid Background="{StaticResource PostBackground}" CornerRadius="5" Margin="{StaticResource PostMargin}"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="auto"/> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="auto"/> 
       </Grid.RowDefinitions> 
       <ContentControl Grid.Row="0" Style="{StaticResource PostHeader}"/> 
       <ContentControl Grid.Row="2" Style="{StaticResource PostFooter}"/> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

風格爲後軀

<Style TargetType="ContentControl" x:Key="PostFooter"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <Grid Margin="5 0"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition Width="*"/> 
        </Grid.ColumnDefinitions> 
        <TextBlock Grid.Column="0" HorizontalAlignment="Left"> 
         <Run Text="{Binding Path=NotesCount, Converter={StaticResource NumberToReadableConverter}}"/> 
         <Run Text="notes"/> 
        </TextBlock> 

        <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right"> 
         <Button Style="{StaticResource ReblogButton}" BorderThickness="2" BorderBrush="black"/> 
         <Button Style="{StaticResource LikeButton}" BorderThickness="2" BorderBrush="black"/> 
        </StackPanel> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

和樣式的按鈕

<Style TargetType="Button" x:Key="LikeButton"> 
    <Setter Property="BorderBrush" Value="Black"/> 
    <Setter Property="BorderThickness" Value="2"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Content"> 
     <Setter.Value> 
      <Grid> 
       <TextBlock Text="&#xEB51;" FontFamily="Segoe MDL2 Assets"/> 
       <TextBlock Text="&#xEB52;" FontFamily="Segoe MDL2 Assets" Foreground="Red" Visibility="Collapsed"> 
        <interactivity:Interaction.Behaviors> 
         <core:DataTriggerBehavior Binding="{Binding Liked}" Value="True"> 
          <core:ChangePropertyAction PropertyName="Visibility" Value="Visible" /> 
         </core:DataTriggerBehavior> 
        </interactivity:Interaction.Behaviors> 
       </TextBlock> 
      </Grid> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="Button" x:Key="ReblogButton"> 
    <Setter Property="BorderBrush" Value="Black"/> 
    <Setter Property="BorderThickness" Value="2"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Content"> 
     <Setter.Value> 
      <SymbolIcon Symbol="Switch"/> 
     </Setter.Value> 
    </Setter> 
</Style> 

而最終的結果看起來是這樣的 end result of the xaml

+1

設置控制的內容一個將被多個控件使用的樣式只在類型類似於字符串或int類型時才起作用。我猜''SymbolIcon Symbol =「Switch」/>'是一個控件本身。如果是這樣的話,那麼你實際上並沒有多次實例化對象,所以只有一個控件實際獲取內容,因爲控件只能有一個直接父對象。 – Meloviz

+0

@Meloviz我剛剛刪除了symbolicon,並用純文本替換它,似乎在每個按鈕中都出現了,但我仍然希望將這些符號放在按鈕中,如果我將按鈕和內容設置爲 ,它會起作用在用戶控件中使用setter並將其放入頁腳? – grabthefish

回答

0

你總是可以創建自己的可重複使用的自定義模板控制,但我只建議這樣做如果您計劃在整個應用程序中有很多可切換的圖標按鈕,因爲它需要一些工作。

IconButton.cs

public sealed class IconButton : ToggleButton 
{ 
    public static readonly DependencyProperty CheckedContentProperty = DependencyProperty.Register("CheckedContent", typeof(object), typeof(IconButton), new PropertyMetadata(null)); 

    public object CheckedContent 
    { 
     get { return (object)GetValue(CheckedContentProperty); } 
     set { SetValue(CheckedContentProperty, value); } 
    } 

    public static readonly DependencyProperty CheckedForegroundProperty = DependencyProperty.Register("CheckedForeground", typeof(Brush), typeof(IconButton), new PropertyMetadata(null)); 

    public Brush CheckedForeground 
    { 
     get { return (Brush)GetValue(CheckedForegroundProperty); } 
     set { SetValue(CheckedForegroundProperty, value); } 
    } 

    public IconButton() 
    { 
     DefaultStyleKey = typeof(IconButton); 
    } 
} 

樣式裏面的主題\ Generic.xaml

<Style TargetType="local:IconButton"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Foreground" Value="{ThemeResource ToggleButtonForeground}"/> 
    <Setter Property="CheckedForeground" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
    <Setter Property="BorderBrush" Value="{ThemeResource ToggleButtonBorderBrush}"/> 
    <Setter Property="BorderThickness" Value="0"/> 
    <Setter Property="Padding" Value="4"/> 
    <Setter Property="HorizontalAlignment" Value="Left"/> 
    <Setter Property="VerticalAlignment" Value="Center"/> 
    <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/> 
    <Setter Property="FontWeight" Value="Normal"/> 
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
    <Setter Property="UseSystemFocusVisuals" Value="True"/> 
    <Setter Property="FocusVisualMargin" Value="-3"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:IconButton"> 
       <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Checked"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Glyph" Storyboard.TargetName="Icon"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CheckedContent, RelativeSource={RelativeSource TemplatedParent}}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icon"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CheckedForeground, RelativeSource={RelativeSource TemplatedParent}}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="CheckedPointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Glyph" Storyboard.TargetName="Icon"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CheckedContent, RelativeSource={RelativeSource TemplatedParent}}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icon"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CheckedForeground, RelativeSource={RelativeSource TemplatedParent}}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="CheckedPressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Glyph" Storyboard.TargetName="Icon"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CheckedContent, RelativeSource={RelativeSource TemplatedParent}}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icon"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CheckedForeground, RelativeSource={RelativeSource TemplatedParent}}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="CheckedDisabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Glyph" Storyboard.TargetName="Icon"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CheckedContent, RelativeSource={RelativeSource TemplatedParent}}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icon"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CheckedForeground, RelativeSource={RelativeSource TemplatedParent}}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Indeterminate"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminate}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="IndeterminatePointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminatePointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="IndeterminatePressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminatePressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="IndeterminateDisabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminateDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Grid x:Name="InnerGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
         <FontIcon x:Name="Icon" Glyph="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

您可以使用它像這樣:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> 
    <local:IconButton Content="&#xEB51;" CheckedContent="&#xEB52;" CheckedForeground="Red"/> 
    <local:IconButton Content="&#xE8EB;" CheckedContent="&#xE8EB;" CheckedForeground="LimeGreen"/> 
</StackPanel> 

Screenshot

(我設置的邊框和背景透明的默認樣式使其看起來不像一個傳統的按鈕,但你可以把它改成任何你想要的。)