3

フルHDLCD画面（42インチ）で表示されるWPFアプリケーションを開発しています。さらに、コントロールを絶対位置に収容する必要があります。開発環境では、1920x1080の長さのウィンドウが表示されません（これは、ターゲット画面の固定解像度です）。

このタスクを実行するためのベストプラクティスは何ですか？

4

2 に答える 2

8

WPFは、デバイスに依存しない単位を使用して、幅/高さ/位置/厚さなどを指定します。

画面のDPIが96dpiに設定されている場合は1DIU/ DIP = 1物理ピクセル.....ただし、DPIが96dpiでない場合は1 DIU=異なる物理ピクセル数。

を使用すると、CanvasDIUを使用して要素が配置されます。

ここで、ピクセル座標の観点から絶対的に配置したいことを意味します。

したがってCanvas、現在のDPI設定に関係なくこれを行うには、スケーリングトリックを使用する必要があります（これは、、ViewBoxまたはで行うことができますLayoutTransform）。

以下の例は、それを実現する1つの方法を示しています（私の画面は1366x768 ....フルHDに変更できます）。

システムのDPIを確認しCanvas、DPIが上がるたびにスケールダウンします。これにより、実際にはピクセル座標を意味するCanvas座標を使用できます。

ユーザー画面を96dpiに変更できる場合は、96dpiで1 DIU = 1物理ピクセルであるため、スケーリングのトリックを実行する必要はありません...再スケーリングは必要ありません。

<Window x:Class="WpfApplication12.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStyle="None"
        AllowsTransparency="True" Background="White"
        SizeToContent="WidthAndHeight"
        Title="MainWindow" Loaded="Window_Loaded">
    <Viewbox x:Name="viewbox">
    <Canvas x:Name="canvas">
        <Rectangle x:Name="rect" Canvas.Top="10" Canvas.Left="10" Stroke="Red" StrokeThickness="1"/>
        <Button Canvas.Top="20" Canvas.Left="20">Test Button</Button>
            <Ellipse Canvas.Top="100" Canvas.Left="100" Width="100" Height="100" Stroke="Red" StrokeThickness="10"/>
            <TextBlock Canvas.Top="100" Canvas.Left="100" FontSize="15">Some Text</TextBlock>
        </Canvas>
    </Viewbox>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication12
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        // HD
        const int screenwidth = 1366;
        const int screenheight = 768;

        // FULL HD
        //const int screenwidth = 1920;
        //const int screenheight = 1080;

        public MainWindow()
        {
            InitializeComponent();

            Top = 0;
            Left = 0;

            canvas.Width = screenwidth;
            canvas.Height = screenheight;

            rect.Width = screenwidth - 20;
            rect.Height = screenheight - 20;
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            bool bScaleBackToPixels = true;

            if (bScaleBackToPixels)
            {
                PresentationSource presentationsource = PresentationSource.FromVisual(this);
                Matrix m = presentationsource.CompositionTarget.TransformToDevice;

                double DpiWidthFactor = m.M11;
                double DpiHeightFactor = m.M22;

                viewbox.Width = screenwidth / DpiWidthFactor;
                viewbox.Height = screenheight / DpiHeightFactor;
            }
            else
            {
                viewbox.Width = screenwidth;
                viewbox.Height = screenheight;
            }
        }
    }
}

<Window x:Class="WpfApplication12.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStyle="None"
        AllowsTransparency="True" Background="White"
        SizeToContent="WidthAndHeight"
        Title="MainWindow" Loaded="Window_Loaded">
    <Canvas x:Name="canvas">
        <Rectangle x:Name="rect" Canvas.Top="10" Canvas.Left="10" Stroke="Red" StrokeThickness="1"/>
        <Button Canvas.Top="20" Canvas.Left="20">Test Button</Button>
            <Ellipse Canvas.Top="100" Canvas.Left="100" Width="100" Height="100" Stroke="Red" StrokeThickness="10"/>
            <TextBlock Canvas.Top="100" Canvas.Left="100" FontSize="15">Some Text</TextBlock>
        </Canvas>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication12
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        // HD
        const int screenwidth = 1366;
        const int screenheight = 768;

        // FULL HD
        //const int screenwidth = 1920;
        //const int screenheight = 1080;

        public MainWindow()
        {
            InitializeComponent();

            Top = 0;
            Left = 0;

            canvas.Width = screenwidth;
            canvas.Height = screenheight;

            rect.Width = screenwidth - 20;
            rect.Height = screenheight - 20;
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            bool bScaleBackToPixels = true;

            if (bScaleBackToPixels)
            {
                PresentationSource presentationsource = PresentationSource.FromVisual(this);
                Matrix m = presentationsource.CompositionTarget.TransformToDevice;

                double DpiWidthFactor = m.M11;
                double DpiHeightFactor = m.M22;

                double scalex = 1 / DpiWidthFactor;
                double scaley = 1 / DpiHeightFactor;

                canvas.LayoutTransform = new ScaleTransform(scalex, scaley);
            }
        }
    }
}

96 DPI設定（小さい-100％）では、画面は次のようになります。

ここに画像の説明を入力してください

120 DPI設定（中-125％）（つまり、96 x 1.25 = 120DPI）では、上記のScaleBackToPixels手法を使用すると、画面は次のようになります（つまり、最初の画面と同じように見えます）。

ここに画像の説明を入力してください

120 DPI設定（中-125％）（つまり、96 x 1.25 = 120DPI）では、調整をまったく行わないと、画面は次のようになります（円がどのように大きくなるか、ボタンのフォントとサイズに注意してください）。 ）。

ここに画像の説明を入力してください

比較のために3つの画像すべてを並べて表示します。

ここに画像の説明を入力してください

于 2012-09-13T20:39:18.610 に答える
0

これが私のラップトップの画面解像度1366x768で画面解像度1920x1080（FullHD）が見えるようにする変換です：

XAML 

        <ContentControl  Canvas.Left="1630" Canvas.Top="400" Content="{Binding Time}" />
        <ContentControl  Canvas.Left="1630" Canvas.Top="590" Content="{Binding NextPrayTime}" />
        <ContentControl  Canvas.Left="1650" Canvas.Top="700" Content="{Binding Today}" />
        <ContentControl  Canvas.Right="520" Canvas.Top="120" Content="{Binding Content}" />
        <ContentControl  Canvas.Left="0" Canvas.Top="965" Content="{Binding PrayTimes}">

        </ContentControl>
    </Canvas>
</Viewbox>

C＃

static public class HD
{
    static public float Width { get { return 1366.0f; } }
    static public float Height { get { return 768.0f; } }
}

static public class FHD
{
    static public float Width { get { return 1920.0f; } }
    static public float Height { get { return 1080.0f; } }
}

static public class HDRatios
{
    static public double Width
    {
        get
        {
#if (DEBUG)
            return double.Parse((HD.Width / FHD.Width).ToString("0.0"));
#else
            return 1;
#endif
        }
    }
    static public double Height
    {
        get
        {
#if (DEBUG)
            return double.Parse((HD.Height / FHD.Height).ToString("0.0"));
#else
            return 1;
#endif
        }
    }

このコードは、開発環境（DEBUGフラグ）では変換が適用され、リリースバージョンでは、とがフルHDの解像度に従っているため、変換が適用されないことを示していCanvas.LeftますCanvas.Top。

Canvasこの経験が、絶対メトリック内のWPFでのコントロールの表示に遭遇する他のユーザーに役立つことを願っています。

于 2012-09-15T21:21:28.153 に答える