WPF .net - 缩放时按钮看起来不同

Posted 2023-04-12

【中文标题】WPF .net - 缩放时按钮看起来不同

【英文标题】：WPF .net - Buttons look different when zoomed

【发布时间】：2021-11-29 15:49:05

【问题描述】：

我正在 Visual Studio 中开发一个 WPF .net 应用程序，并且遇到了一个问题，即按钮及其着色器看起来不同，具体取决于我的放大程度。这也适用于更改显示器的分辨率。我附上了一些说明该问题的屏幕截图。有人知道这里发生了什么吗？

我正在为 Visual Studio 使用 WPF-Neumorphism-Plus 套件

我的 XAML（我只包含了样式内容，但如果需要可以添加更多内容）

      <Style x:Key="Button_Background" TargetType="Border">
          <Setter Property="Background"       Value="#ffffff"/>
          <Setter Property="CornerRadius"     Value="50"/>
          <Setter Property="Opacity"          Value="0.2"/>
      </Style>

      <Style x:Key="Text_Format" TargetType="Label">
          <Setter Property="FontFamily"       Value="Dubai Medium"/>
          <Setter Property="FontSize"         Value="40"/>
          <Setter Property="Foreground"       Value="#ffffff"/>
      </Style>

      <Style x:Key="NeumorphismStyle_light" TargetType="Button">
          <Setter Property="FontFamily"       Value="Dubai Medium"/>
          <Setter Property="Foreground"       Value="#ffffff"/>
          <Setter Property="FontSize"         Value="40"/>
          <Setter Property="Background"       Value="#abccde"/>
          <Setter Property="Template">
              <Setter.Value>
                  <ControlTemplate TargetType="Button">
                      <Grid>
                          <Grid.Effect>
                              <WPF_Neumorphism_Plus:Neumorphism_Plus_Shader BorderRadius="25" BlurRadius="10" OffsetX="4" OffsetY="5" SpreadRadius="2"
                                      PrimaryColor="#6d828f" SecondaryColor="#d5ebf7" />
                          </Grid.Effect>
                          <Rectangle Fill="TemplateBinding Background" RadiusX="25" RadiusY="25"/>
                          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                      </Grid>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>

          <Style.Triggers>
              <Trigger Property="Tag" Value="on">
                  <Setter Property="Template">
                      <Setter.Value>
                          <ControlTemplate TargetType="Button">
                              <Grid>
                                  <Grid.Effect>
                                      <WPF_Neumorphism_Plus:Neumorphism_Plus_Shader BorderRadius="25" BlurRadius="6" OffsetX="5" OffsetY="3" SpreadRadius="0"
                                      PrimaryColor="#81b376" SecondaryColor="#cff0c7" Inset="1"/>
                                  </Grid.Effect>
                                  <Rectangle Fill="TemplateBinding Background" RadiusX="25" RadiusY="25"/>
                                  <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                              </Grid>
                          </ControlTemplate>
                      </Setter.Value>
                  </Setter>
                  <Setter Property="Background" Value="#b7deab"/>
              </Trigger>
              <Trigger Property="Tag" Value="off">
                  <Setter Property="Background" Value="#abccde"/>
              </Trigger>
          </Style.Triggers>
      </Style>

【问题讨论】：

这很可能与着色器代码的编写方式以及它对环境变换的反应方式有关。你应该问开发者。

【参考方案1】：

我遇到过很多次这个问题，有一天我学会了一个简单的解决方法。 您所要做的就是在您的 ViewBox 中添加您的 Grid，然后您必须将 ViewBox 设置为具有 StretchDirection="Both" 和 Stretch="Uniform"

XAML

<Viewbox StretchDirection="Both" Stretch="Uniform">
    <Grid Height="720" Width="1280" >
     <!-- Your XAML Code Here. -->
    </Grid>
</ViewBox>

我知道您可能已经知道这一点，但请记住，您需要在 <Window/> 之间添加所有这些代码。我这里的网格也是720p，你可以把它改成你想要的宽度和高度。

这样做是将网格添加到 ViewBox 中。放大时会均匀放大。

【参考方案2】：

在我看来，这是基于透视问题（缩放与常规）。查看您提供的两张图片，带有“D”文本的按钮不会改变其视角。这可能是由于文本区域边缘和按钮边缘之间的环境区域。您是否尝试过分别更改按钮和文本项的背景？