Question

因此，每当我在设计窗口中使用应用程序并放大时，图像根本不会模糊

但是，一旦我运行该应用程序，它就会看起来像这样。它变得非常像素化，我不知道为什么。

这是按钮的XAML代码

    <Button  Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
        <Grid>
            <Image UseLayoutRounding="True" IsHitTestVisible="False" Height="20" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png" />
            <TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
        </Grid>
    </Button>

和模板

    <Setter Property="Background" Value="#2d2d30"/>
        <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1" Padding="2">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#686868"/>
        </Trigger>
    </Style.Triggers>
</Style>

还有我正在使用的原始图像。

Answer 1

您根本不应该使用位图图标。

使用字体中的符号

<Button Width="100" Height="30">
    <StackPanel Orientation="Horizontal">
        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#60616;"/>
        <TextBlock VerticalAlignment="Center" Text=" Add Product"/>
    </StackPanel>
</Button>

或带有矢量绘图的路径：

<Button Width="100" Height="30">
    <StackPanel Orientation="Horizontal">
        <Path Stroke="Black" StrokeThickness="1.5"
              StrokeStartLineCap="Round" StrokeEndLineCap="Round">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="9,9" RadiusX="9" RadiusY="9"/>
                    <LineGeometry StartPoint="5,9" EndPoint="13,9"/>
                    <LineGeometry StartPoint="9,5" EndPoint="9,13"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
        <TextBlock VerticalAlignment="Center" Text=" Add Product"/>
    </StackPanel>
</Button>

Answer 2

我认为您应该尝试使用其他RenderOptions.BitmapScalingModes（如here所述）

function genTree($tree)
{
  foreach($tree as $arr)
  {
    echo '<li>';
    echo '<input type="checkbox" id="'.$arr['name'].'" name="permission[]" value="'.$arr['id'].'"></input>';
    echo '<label for"'.$arr['name'].'">'.ucfirst($arr['name']).'</label>';
    if (isset($arr['children']) && count($arr['children']) > 0)
    {       
      genTree($arr['children']);  
    }
    echo '</li>';
  }
}

function newfunc($tree){
  echo '<ul class="treeview">';
  genTree($tree)
  echo '</ul>';
}

对于颜色数量较少的图像（例如您的情况），NearestNeighbour效果最好。

Answer 3

在XAML中，图像的高度和宽度设置为20，原始图像的大小为128 x128。因此WPF必须将图像缩小很多。这将导致像素化/粗糙的图像（尤其是圆形）

解决方案：以正确的尺寸（20x20）重新创建图像。

为什么我的图像在运行时变得像素化？

3 个答案: