WPF 按钮在 55" 屏幕上消失答案

【问题标题】：WPF Buttons disappear on 55" screenWPF 按钮在 55" 屏幕上消失
【发布时间】：2017-05-30 16:15:37
【问题描述】：

我在 Visual Studio 2017 中使用 C# 开发了一个 wpf-app。在目标设备（55" NEC 触摸屏，分辨率 1920x1080）上部署软件时，我设计的按钮将在应用程序启动时消失，而 MainWindow 的其余部分保持原位。我在<Window> 标签Height="1080" Width="1920" 中设置。当在我的桌面（22 英寸）上的 1920x1080 屏幕上测试软件，按钮就位。

<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide"  Background="#253135" Margin="375,531,1362,375">
        <TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="xyz" FontSize="12" Margin="0,59,0,58"/>
    </Button>

我有四个按钮，所有按钮的位置不同。

这是整个 XAML：

<Window x:Class="Startup.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Prometheus" Height="1080" Width="1920"
    WindowState="Maximized"
WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"

    >
<Window.Background>
    <ImageBrush ImageSource="Resource/background_img.png"></ImageBrush>

</Window.Background>


<Grid Margin="12">





    <Grid Margin="10,4,-10,361" HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="120"/>
        </Grid.ColumnDefinitions>

        <Button Grid.Column="1" Content="Start" HorizontalAlignment="Right" Margin="0,10,0,0" VerticalAlignment="Top" Width="101" RenderTransformOrigin="-0.013,0.15" Name="GetEventsBtn" Click="GetEvents" Height="34" IsDefault="True" TabIndex="2" Visibility="Hidden" />
        <TextBlock HorizontalAlignment="Left" Margin="76,68,0,0" TextWrapping="Wrap" Text="Hi" VerticalAlignment="Top"  FontFamily="" Height="60" Width="613" Foreground="#FFE0D2D2" FontSize="48"/>
        <TextBlock HorizontalAlignment="Left" Margin="76,133,0,0" TextWrapping="Wrap" Text="Please choose one option below to get started quickly." VerticalAlignment="Top"  FontFamily="" Height="46" Width="499" Foreground="#FFE0D2D2" FontSize="20"/>

    </Grid>




    <Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide"  Background="#253135" Margin="375,531,1362,375">
        <TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12" Margin="0,59,0,58"/>
    </Button>


    <Button  Style="{StaticResource FlatButtonStyle}"  Click="PlanAMeeting_Click" Name="PlanAMeeting"  Margin="170,531,1576,375">
        <TextBlock Grid.Row="1" Text="Plan a meeting" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"></TextBlock>
    </Button>

    <Button Style="{StaticResource FlatButtonStyle}" Click="CreateAMeeting_Click" Name="CreateAMeeting"  Margin="375,319,1362,587">
        <TextBlock Grid.Row="1"  TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"> Create a new <LineBreak></LineBreak> meeting for now</TextBlock>
    </Button>

    <Button Style="{StaticResource FlatButtonStyle}" Click="StartAMeeting_Click" Name="StartAMeeting"  Margin="170,319,1576,587">
        <TextBlock Grid.Row="1" TextWrapping="Wrap"  TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12">Start a scheduled<LineBreak></LineBreak>  meeting</TextBlock>
    </Button>

    <Grid MaxHeight="200" MaxWidth="600" Margin="1147,-306,39,306" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions >
            <RowDefinition Height="60" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>
        <TextBlock Name="GR1Z1" Foreground="White" FontSize="16" FontWeight="Bold" Grid.Row="1" Text="Please wait while loading..."></TextBlock>
        <TextBlock Name="GR1Z2" Foreground="White" Grid.Row="2"></TextBlock>
        <TextBlock Name="GR1Z3" Foreground="White" Grid.Row="3"></TextBlock>
        <TextBlock Name="GR1Z4" Foreground="White" Grid.Row="4"></TextBlock>
        <TextBlock Name="GR1Z5" Foreground="White" Grid.Row="5"></TextBlock>
    </Grid>

    <Grid MaxHeight="200" MaxWidth="600" Margin="1147,96,39,306">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>
        <TextBlock Name="GR2Z1" Grid.Row="1"  Foreground="White" FontSize="16" FontWeight="Bold"></TextBlock>
        <TextBlock Name="GR2Z2" Grid.Row="2"  Foreground="White"></TextBlock>
        <TextBlock Name="GR2Z3" Grid.Row="3"  Foreground="White"></TextBlock>
        <TextBlock Name="GR2Z4" Grid.Row="4" Foreground="White"></TextBlock>
        <TextBlock Name="GR2Z5" Grid.Row="5" Foreground="White"></TextBlock>
    </Grid>


</Grid>

风格

  <Style TargetType="Button" x:Key="FlatButtonStyle">
        <Setter Property="Background" Value="#253135"/>
        <Setter Property="Foreground" Value="#253135"/>
            <Setter Property="Width" Value="150"/>
            <Setter Property="Height" Value="150"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border BorderThickness="0"
                    Background="{TemplateBinding Background}"
                    CornerRadius="12"
                                Name="Border">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="White" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

【问题讨论】：

目标屏和你的开发者屏是否有不同的DPI设置？
小建议不要使用 Margin 并检查您的 55 屏幕是否在显示设置中 100% 缩放
如果要实现动态布局，则不应使用绝对位置（Margin="#,#,#,#"），而应使用相对位置。特别是，您应该将按钮包含在网格中并像这样定义布局。如果您发布整个 XAML，我们可以对其进行一些重构。
如何删除Margin？显示了吗？如果是，问题只是位置。
如果您可以为您的Button 发布Style，那么我们将更容易发现问题。

标签： c# wpf visual-studio xaml

【解决方案1】：

这只是给你一个想法：

我删除了所有Margin 属性，以便不使用绝对位置，而是使用相对位置（如果您想实现动态布局）。
我将布局的左侧部分放入一个包含三行的网格中，其中前两行用于标题文本，最后一行用于按钮。
在最后一行中，我放置了另一个包含两行两列的网格，其中每个单元格都包含一个按钮

这部分标记对应于你之后的下一个网格：<Grid Margin="12">:

    <Grid HorizontalAlignment="Left">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock
            Grid.Row="0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            FontSize="48"
            Foreground="#FFE0D2D2"
            Text="Hi"
            TextWrapping="Wrap" />
        <TextBlock
            Grid.Row="1"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            FontSize="20"
            Foreground="#FFE0D2D2"
            Text="Please choose one option below to get started quickly."
            TextWrapping="Wrap" />

        <Grid Grid.Row="2">

            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button
                Name="QuickGuide"
                Grid.Row="0"
                Grid.Column="0"
                Background="#253135"
                Style="{StaticResource FlatButtonStyle}">
                <TextBlock
                    VerticalAlignment="Center"
                    FontSize="12"
                    Foreground="AntiqueWhite"
                    Text="Quick Guide"
                    TextAlignment="Center" />
            </Button>

            <Button
                Name="PlanAMeeting"
                Grid.Row="1"
                Grid.Column="1"
                Style="{StaticResource FlatButtonStyle}">
                <TextBlock
                    VerticalAlignment="Center"
                    FontSize="12"
                    Foreground="AntiqueWhite"
                    Text="Plan a meeting"
                    TextAlignment="Center" />
            </Button>

            <Button
                Name="StartAMeeting"
                Grid.Row="1"
                Grid.Column="0"
                Style="{StaticResource FlatButtonStyle}">
                <TextBlock
                    VerticalAlignment="Center"
                    FontSize="12"
                    Foreground="AntiqueWhite"
                    TextAlignment="Center"
                    TextWrapping="Wrap">
                    Start a scheduled
                    <LineBreak />
                    meeting
                </TextBlock>
            </Button>

            <Button
                Name="CreateAMeeting"
                Grid.Row="0"
                Grid.Column="1"
                Style="{StaticResource FlatButtonStyle}">
                <TextBlock
                    VerticalAlignment="Center"
                    FontSize="12"
                    Foreground="AntiqueWhite"
                    TextAlignment="Center">
                    Create a new
                    <LineBreak />
                    meeting for now
                </TextBlock>
            </Button>


        </Grid>

    </Grid>

【讨论】：

这对开始使用相对位置很有帮助！非常感谢。