2017-01-23 77 views
0

我想找到一個更乾淨的解決方案來顯示按鈕控件的內容我想要的方式。基本上,我的目標是製作一個按鈕,它作爲一個Grid,但保留了Button的所有功能。所以它是可點擊的,但不會擠壓內容。 (有點像Windows瓷磚)UWP XAML按鈕內容模板

爲了實現這個目前,我可以在一個按鈕控件中放置一個網格,但我必須手動設置高度和寬度。我希望通過動態和延伸到按鈕的寬度和高度。

這是我正在嘗試編輯的當前模板。我很樂意爲ContentTemplate創建一個自定義樣式,但我沒有多少運氣。任何幫助表示讚賞!也打開任何干淨的解決方案。

<Style x:Key="ButtonTest" TargetType="Button"> 
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAccentBrush}"/> 
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/> 
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/> 
    <Setter Property="BorderThickness" Value="0"/> 

    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="VerticalAlignment" Value="Stretch"/> 
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
    <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="Button"> 
       <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="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="ContentTemplate"> 
     <Setter.Value> 
      <DataTemplate> 
       <Grid> 
        <!--Somehow need to stick Content={TemplateResource Content}--> 
       </Grid> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

作爲參考,這是我過去一直在做的按鈕。它完成了工作,但對於屏幕尺寸的變化並不動態。

<Button x:Name="TileButton" Margin="2" Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="3" Style="{StaticResource ButtonTileStyle}"> 
     <Grid HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="-8,-4" Width="113" Height="123"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 

      <Image Grid.Row="1" Source="..."/> 
      <TextBlock x:Name="Label" Text="Label" Grid.Row="2" VerticalAlignment="Bottom" Margin="5,0,0,2" HorizontalAlignment="Stretch" TextAlignment="Left"/> 
     </Grid> 
    </Button> 

回答

1

你只是想要這個嗎?

的PoC:

<Style x:Key="CWButtonStyle" TargetType="Button"> 
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/> 
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/> 
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/> 
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/> 
    <Setter Property="Padding" Value="8,4,8,4"/> 
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="VerticalAlignment" Value="Stretch"/> 
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
    <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="Button"> 
       <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
        <Grid.RowDefinitions> 
         <RowDefinition/> 
         <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition/> 
         <ColumnDefinition/> 
        </Grid.ColumnDefinitions> 
        <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="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Rectangle Fill="Red"/> 
        <Rectangle Fill="Green" Grid.Column="1"/> 
        <Rectangle Fill="Blue" Grid.Row="1"/> 
        <Rectangle Fill="Gray" Grid.Row="1" Grid.Column="1"/> 
        <TextBlock Text="1"/> 
        <TextBlock Text="2" Grid.Column="1"/> 
        <TextBlock Text="3" Grid.Row="1"/> 
        <TextBlock Text="4" Grid.Row="1" Grid.Column="1"/> 

        <!-- Put this guy in a grid cell or could make it appear over center if you like. --> 
        <ContentPresenter Grid.RowSpan="2" Grid.ColumnSpan="2" 
             x:Name="ContentPresenter" 
             AutomationProperties.AccessibilityView="Raw" 
             BorderBrush="{TemplateBinding BorderBrush}" 
             BorderThickness="{TemplateBinding BorderThickness}" 
             ContentTemplate="{TemplateBinding ContentTemplate}" 
             ContentTransitions="{TemplateBinding ContentTransitions}" 
             Content="{TemplateBinding Content}" 
             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
             Padding="{TemplateBinding Padding}" 
             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

,並在實例...

<Button Content="Blah" 
     Height="150" Width="150" 
     Foreground="White" 
     FontSize="35" 
     Style="{StaticResource CWButtonStyle}"/> 

希望這有助於歡呼:)