相同的png图像文件显示在屏幕上的不同位置失去清晰度- Silverlight

本文关键字:位置 失去 Silverlight 清晰度 图像 png 文件 显示 屏幕 | 更新日期: 2023-09-27 18:04:19

在我们的Silverlight 5应用程序中,我们有一个16x16的png,用于自定义控件中的按钮,用于导航到与该数据相关的页面。在一些屏幕上,这个控件有六个不同的实例。由于某种原因,虽然每个控件的样式相同,但在某些图像上,控件看起来很清晰,而在其他图像上则很模糊。一般来说,似乎屏幕顶部的控件渲染得很清楚,而那些来自中心和下面的控件则很模糊。这可能有或没有任何相关性…

我被难住了,为什么会发生这种情况,该怎么做。我发现几乎所有可能的事情都与WPF有关,它有更多可用的选项。它不仅仅出现在这个控件上这个是使用最广泛和最明显的实例:

            <VisualState x:Name="Normal"/>
            <VisualState x:Name="MouseOver">
              <Storyboard>
                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Pressed">
              <Storyboard>
                <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Disabled">
              <Storyboard>
                <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
          <VisualStateGroup x:Name="FocusStates">
            <VisualState x:Name="Focused" />
            <VisualState x:Name="Unfocused" />
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
          <Grid Background="{TemplateBinding Background}"  Margin="1">
            <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
            <Rectangle x:Name="BackgroundGradient" >
              <Rectangle.Fill>
                <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                  <GradientStop Color="#FFFFFFFF" Offset="0" />
                  <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                  <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                  <GradientStop Color="#C6FFFFFF" Offset="1" />
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
          </Grid>
        </Border>
        <ContentPresenter x:Name="contentPresenter"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
        <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
        <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>

编辑:-现在修复如下修复了在遵循Franck建议的链接后的问题。

修改它以吞下错误…相反,它做到了这一点,并有模糊的图像,而不是让应用程序失败,因为它在某些情况下…

namespace PixelSnapper

{使用系统;使用System.Windows;使用System.Windows.Controls;使用System.Windows.Media;

public enum PixelSnapType
{
    None, // No snapping
    Closest, // Snap to closest pixel using Math.Round
    TopLeft // Snap to integral portion of pixel by casting to int
}
public class Snapper : UserControl
{
    public Snapper()
    {
        LayoutUpdated += SnapperLayoutUpdated;
        Snap = PixelSnapType.Closest;
    }
    public PixelSnapType Snap { get; set; }
    private void SnapperLayoutUpdated(object sender, EventArgs e)
    {
        if (Content == null) return;
        if (Snap == PixelSnapType.None)
        {
            Content.RenderTransform = null;
            return;
        }
        try
        {

            // Remove existing transform so that it is not a part of the calculations
            if (this.transform != null)
            {
                this.transform.X = 0;
                this.transform.Y = 0;
            }
            // Calculate actual location
            var globalTransform = Content.TransformToVisual(Application.Current.RootVisual) as MatrixTransform;
                if (globalTransform == null)
                {
                    return;
                }
            var p = globalTransform.Matrix.Transform(Zero);
            double deltaX = Snap == PixelSnapType.Closest ? Math.Round(p.X) - p.X : (int)p.X - p.X;
            double deltaY = Snap == PixelSnapType.Closest ? Math.Round(p.Y) - p.Y : (int)p.Y - p.Y;
            // Set new transform
            if (deltaX != 0 || deltaY != 0)
            {
                if (this.transform == null)
                {
                    this.transform = new TranslateTransform();
                    Content.RenderTransform = this.transform;
                }
                if (deltaX != 0)
                {
                    this.transform.X = deltaX;
                }
                if (deltaY != 0)
                {
                    this.transform.Y = deltaY;
                }
            }
        }
        catch (Exception ex)
        {
            return;
        }
    }
    private TranslateTransform transform;
    private static readonly Point Zero = new Point(0, 0);
}

}

原创由Dave Relyea提供:pixel Snapper

相同的png图像文件显示在屏幕上的不同位置失去清晰度- Silverlight

你需要在图像上设置SnapsToDevicePixels="True",否则一些图像将是17x16, 17x17和16x17

你可能还想玩质量与这个

RenderOptions.BitmapScalingMode="HighQuality"