【问题标题】:How are WPF Buttons and TextBlock styles related?WPF 按钮和 TextBlock 样式有什么关系?
【发布时间】:2010-12-19 17:56:26
【问题描述】:

我的“默认”按钮有一个自定义样式,并且还为 TextBlocks 创建了一个自定义样式。如果我完全删除 TextBlock 样式,一切正常,但是一旦由于某种原因添加了 TextBlock 样式,Button 样式就会用于 Button 的文本“默认”状态。似乎这里正在进行某种继承,但我看不到 msdn 文档中的位置。怎么回事?

我使用的是 Expression Blend 4——还有一个奇怪的事情是 Blend 中的预览看起来不错,但是当我运行应用程序时,按钮样式在默认状态下不正确。以下是似乎相互冲突的样式:

        <ResourceDictionary>

        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="White" Offset="0"/>
                                <GradientStop Color="#FFFDFF00" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <TransformGroup>
                                <ScaleTransform ScaleY="1.20" ScaleX="1.20"/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                <ContentPresenter.Effect>
                                    <DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
                                </ContentPresenter.Effect>
                            </ContentPresenter>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True"/>
                            <Trigger Property="IsPressed" Value="True"/>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontFamily" Value="/Rtk;component/Fonts/#Segoe Print"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Background" Value="{x:Null}"/>
        </Style>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="TextWrapping" Value="NoWrap"/>
            <Setter Property="TextTrimming" Value="None"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
                </Setter.Value>
            </Setter>
            <Setter Property="FontFamily" Value="/Rtk;component/Fonts/#Segoe Print"/>
        </Style>
    </ResourceDictionary>

这就是我使用 Button 控件本身的方式:

<Button Content="Button Text" FontSize="24"/>  

(注意这个字体大小和我在默认样式中指定的大小不同,18 - 我想在这个按钮的情况下覆盖它)

编辑: MainWindow.xaml 中的实际按钮条目如下所示,除了我在 App.xaml 中提出的样式更改之外,没有其他自定义项:

<Button Content="Button" HorizontalAlignment="Left" Margin="336,0,0,274.226" VerticalAlignment="Bottom" Width="75"/>

为了说明我所看到的:

【问题讨论】:

标签: wpf expression-blend


【解决方案1】:

只是一个快速的猜测,但是当按钮的内容是字符串时,它不是默认的文本块吗?

【讨论】:

  • 不确定,但我刚刚意识到它与 Textblock 样式不完全一样,所以我不确定发生了什么。字体大小相同,阴影的强度似乎是 Blend 预览的两倍。我只将问题与 TextBlock 联系起来,因为删除该样式会使 Button 样式正常工作。
  • 确实,作为按钮内容的字符串将自动包装到 TextBlock 中,但“隐式”TextBlock 不会受到无键样式资源的影响。
  • 这可能是一个错误吗?我正在上传一个 Blend 项目来演示这个问题。
【解决方案2】:

正如人们所建议的,您的 Button 包含一个为保存内容而创建的 Textblock,它从 app.xaml 中获取样式,您可以通过几种方式解决这个问题,这里有几个:

在你的按钮中加入一个明确的文本块,并且不应用任何样式:

  <Button Margin="272,192,277,0" VerticalAlignment="Top">
        <TextBlock Text="Button" Style="{x:Null}"/>
    </Button>

在你的按钮样式中加入一个文本块,样式也是空的:

 <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
      <TextBlock Text="{TemplateBinding Content}" Style="{x:Null}">
                       <TextBlock.Effect>
                          <DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
                       </TextBlock.Effect>
      </TextBlock>
         </Grid>
              <ControlTemplate.Triggers>
                  <Trigger Property="IsFocused" Value="True"/>
                  <Trigger Property="IsDefaulted" Value="True"/>
                  <Trigger Property="IsMouseOver" Value="True"/>
                  <Trigger Property="IsPressed" Value="True"/>
                  <Trigger Property="IsEnabled" Value="False"/>
                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Setter.Value>

希望这两个中的一个对你有用。

【讨论】:

  • 哇!如此简单,我什至没有想到您可以省略 ContentPresenter 并使用绑定来设置文本。完美运行!
【解决方案3】:

仅查看您发布的代码,我看不出 TextBlock 样式如何以任何方式影响按钮的外观 - 除非按钮的内容包含(直接或间接)文本块。您能否发布更完整的代码示例,可能包括 Button 的 XAML?

【讨论】:

  • 当按钮显示文本时,ButtonContentTextBlock。如果您想显示图像,您可以使用Image。您甚至可以通过将StackPanel 放入其中包含您想要的任何内容来制作复合按钮。
  • 我会添加更多内容,包括显示正在发生的事情的屏幕截图。但 Button 应该只是应用了 App.xaml 样式的“默认”按钮。
  • 我放了一个 Blend 4 示例项目,如果你有时间可以从一些愚蠢的文件共享网站下载它。 App.xaml 在 TextBlock 样式之前有一个注释,如果我删除它,Button 可以正常工作......但是默认的 TextBlocks 变成纯黑色文本。我需要改变这两种风格。
猜你喜欢
  • 1970-01-01
  • 2023-03-19
  • 1970-01-01
  • 1970-01-01
  • 2013-07-11
  • 1970-01-01
  • 2011-02-14
  • 1970-01-01
相关资源
最近更新 更多