Question

寻找最简单的样式按钮方式：

100％透明，无表情等。唯一的视觉效果是需要绘制的“X”

MouseOver将使用不同颜色为“X”着色。

提出这种控制的步骤是什么？我不确定如何处理它。我知道的唯一方法是使用Blend获取模板，然后通过删除所有元素，边框等来编辑它。有更简单的方法吗？

Answer 1

最简单的方法是重新尝试，无论是从现有模板开始还是通过删除新模板。

我认为绝对值得通过模板获得足够的舒适度，你可以手工编写这样的模板。

大部分时间都很直接。最复杂的部分是获得视觉状态。您可以阅读有关VisualStateManager类here的更多信息。

以下是您的方案的模板外观示例：

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <ControlTemplate x:Key="XButtonTemplate">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="textblock" 
                                            Storyboard.TargetProperty="(Foreground).(Color)" To="Red"
                                            Duration="0:0:0.2" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="textblock" 
                                            Storyboard.TargetProperty="(Foreground).(Color)" To="Black"
                                            Duration="0:0:0.2" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <TextBlock x:Name="textblock" HorizontalAlignment="Center" VerticalAlignment="Center" Text="X" />
            </Grid>
        </ControlTemplate>
    </Grid.Resources>
    <StackPanel>
        <Button Height="23" Width="23" Template="{StaticResource XButtonTemplate}" /> 
    </StackPanel>
</Grid>

Answer 2

我可以在用户按

时帮助您

在app.xaml

中

添加

<Style x:Key="btnStylePress" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
 <Setter.Value>
  <ControlTemplate TargetType="Button">
   <Grid Background="Transparent">
    <VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="CommonStates">
      <VisualState x:Name="Normal"/>
      <VisualState x:Name="MouseOver"/>
      <VisualState x:Name="Pressed">
       <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentContainer" />
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ContentContainer" />
        <DoubleAnimation Duration="0" To="-0.652" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ContentContainer"/>
        <DoubleAnimation Duration="0" To="-76" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ContentContainer"/>
        <DoubleAnimation Duration="0" To="0.826" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ButtonBackground" />
        <DoubleAnimation Duration="0" To="-8" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ButtonBackground"/>
        <DoubleAnimation Duration="0" To="0.552" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ButtonBackground" />
        <DoubleAnimation Duration="0" To="-24" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ButtonBackground" />
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" />
       </Storyboard>
      </VisualState>
      <VisualState x:Name="Disabled">
       <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
         <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
        </ObjectAnimationUsingKeyFrames>
       </Storyboard>
      </VisualState>
     </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" RenderTransformOrigin="0.5,0.5">
     <Border.RenderTransform>
      <CompositeTransform/>
     </Border.RenderTransform>
     <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">
      <ContentControl.RenderTransform>
       <CompositeTransform/>
      </ContentControl.RenderTransform>
     </ContentControl>
    </Border>
   </Grid>
  </ControlTemplate>
 </Setter.Value>
</Setter>
</Style>

以及任何想要获得该样式的按钮

<Button **Style="{StaticResource btnStylePress}"** Grid.Row="1" Height="266" HorizontalAlignment="Left" Margin="252,419,0,0" Name="BtnStore" VerticalAlignment="Top" Width="154" Click="BtnStore_Click" BorderThickness="0" Background="{x:Null}" />

如何设计样式按钮？

2 个答案: