开发解决独立的应用技巧 [英] tips on developing resolution independent application

问题描述

它是一个很好的做法，找到工作区的测量，并在代码中设置一些属性，以便它可以被绑定到控制的保证金或高度/ Width属性在XAML？

Is it a good practice to find the workarea measurement and set some properties in code so that it could be bound to Control's margin or height/Width properties in xaml?

我这样做使我的窗口将根据现有的工作区调整

I do this so that my window would resize according to the available workarea.

const int w = SystemParameters.WorkArea.Width;
const int h = SystemParameters.WorkArea.Height;

public Thickness OuterGridMargin { get; }

MainViewModel()
{
    OuterGridMargin = new Thickness(w/5,h/6,w/5,h/4);
}

XAML：

xaml:

<Grid Margin="{Binding OuterGridMargin}" />

我这样做对一些外容器，这样的布局不会在较低的分辨率搞砸。目前我在一个201600x900的解析度（96 dpi）的工作。我的应用程序的小工具像，没有正规窗口。

I do this for some outer containers so that the layout would not be messed in lower resolutions. Currently I work at 1600x900 res(96 dpi) in a 20". My application is gadget like and does not have the regular window.

我想知道是否有一些替代的方法。

I want to know if there are some alternative approaches.

搜索[WPF]分辨率]的 1 给出了很多解决类似问题的问题，但我还是我卡住，无法得出一个结论如何实现良好的分辨率无关布局。

A search of [wpf] resolution]1 gives a lot of questions addressing similar problem but still I'm stuck and not able to come to a conclusion how to achieve a good resolution-independent layout.

推荐答案

有两种方式来应对WPF分辨率。

There are two ways to deal with resolution in WPF.

一种选择是设计到最小分辨率和只要确保一切适当停靠，这样的元素得到的窗口分辨率变大较大，这是多少人做事情的WinForms和仍然工作体面很好的WPF，你可能已经拥有如何处理一些这方面的概念设置的Horizo​​ntalAlignment，VerticalAlignment和利润。

One option is to design to a minimum resolution and just make sure everything is docked appropriately so that the elements get larger as the Window resolution gets larger. This is how many people did things in WinForms and still works decently well for WPF. You probably already have some concept of how to deal with this by setting HorizontalAlignment, VerticalAlignment, and margins.

较新的，时髦的事情在WPF做到这一点几乎是不可能的WinForms做的是有你的应用程序实际上只是在如此放大你的控制得到作为你的窗口越做越大。要做到这一点，你会在你的窗口中的一些根元素上应用Sca​​leTransform，让WPF负责剩下的照顾。它真的很酷

The newer, trendier thing to do in WPF that was nearly impossible to do in WinForms is have your application actually just zoom in so your controls get bigger as your Window does. To do this, you'll apply a ScaleTransform on some root element in your Window and let WPF take care of the rest. It's really cool.

要证明这是什么样，这里有一个窗口会看什么，当你启动应用程序一样，使其体积更小，并使其更大：<一HREF =htt​​p://i.stack.imgur.com/QeoVK.png> http://i.stack.imgur.com/QeoVK.png

To show what this is like, here's what a window would look like when you start the app, make it smaller, and make it bigger: http://i.stack.imgur.com/QeoVK.png

下面的代码隐藏在小样本应用程序，我提出：

Here's the code-behind for the small sample app I made:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    #region ScaleValue Depdency Property
    public static readonly DependencyProperty ScaleValueProperty = DependencyProperty.Register("ScaleValue", typeof(double), typeof(MainWindow), new UIPropertyMetadata(1.0, new PropertyChangedCallback(OnScaleValueChanged), new CoerceValueCallback(OnCoerceScaleValue)));

    private static object OnCoerceScaleValue(DependencyObject o, object value)
    {
        MainWindow mainWindow = o as MainWindow;
        if (mainWindow != null)
            return mainWindow.OnCoerceScaleValue((double)value);
        else
            return value;
    }

    private static void OnScaleValueChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        MainWindow mainWindow = o as MainWindow;
        if (mainWindow != null)
            mainWindow.OnScaleValueChanged((double)e.OldValue, (double)e.NewValue);
    }

    protected virtual double OnCoerceScaleValue(double value)
    {
        if (double.IsNaN(value))
            return 1.0f;

        value = Math.Max(0.1, value);
        return value;
    }

    protected virtual void OnScaleValueChanged(double oldValue, double newValue)
    {

    }

    public double ScaleValue
    {            
        get
        {
            return (double)GetValue(ScaleValueProperty);
        }
        set
        {
            SetValue(ScaleValueProperty, value);
        }
    }
    #endregion

    private void MainGrid_SizeChanged(object sender, EventArgs e)
    {
        CalculateScale();
    }

    private void CalculateScale()
    {
        double yScale = ActualHeight / 250f;
        double xScale = ActualWidth / 200f;
        double value = Math.Min(xScale, yScale);
        ScaleValue = (double)OnCoerceScaleValue(myMainWindow, value);
    }
}

和XAML中：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" 
    Name="myMainWindow"
    Width="200" Height="250">
<Grid Name="MainGrid" SizeChanged="MainGrid_SizeChanged">
    <Grid.LayoutTransform>
        <ScaleTransform x:Name="ApplicationScaleTransform"
                        CenterX="0"
                        CenterY="0"
                        ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
                        ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
    </Grid.LayoutTransform>
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150">
        <TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/>
        <Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
    </Grid>
</Grid>

这篇关于开发解决独立的应用技巧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！