如何针对全屏视图优化窗口布局？ WPF

Question

我有一个WPF窗口，它包含一个主页按钮，顶行按钮和视频源的简单布局 但是当我最大化窗口时。布局与标准视图不同步。

我试图通过将图像元素设置为stretch "fill"来修复某些布局，但是顶行的按钮看起来并不统一，主页按钮也会重新定位到屏幕中心，而不是好

我的问题我如何调整xaml布局属性以支持标准和最大化视图？

这是窗口的布局：

<Window x:Class="KinectKickboxingBVversion1.TrainingFrm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TrainingFrm" Height="377.612" Width="637.313" Loaded="Window_Loaded">

    <Grid>

        <StackPanel Orientation="Horizontal" >
            <Button x:Name="jabBtn" Background="BlueViolet"  Content="Jab" Width="100" Height="50" Click="jabBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <Button x:Name="crossBtn" Background="BlueViolet" Content="Cross" Width="100" Height="50" Click="crossBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <Button x:Name="jabCrossHookBtn" Background="BlueViolet" Content="Jab-Cross-Hook" Width="100" Height="50" Click="jabCrossHookBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <Button x:Name="pKickBtn" Content="Push Kick" Background="BlueViolet" Width="100" Height="50" Click="pKickBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
            <Button x:Name="blockBtn"  Content="Kick Block" Background="BlueViolet" Width="100" Height="50" Click="blockBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
            <Label Content="SCORE: " x:Name="lblScore" Visibility="Collapsed"/>
            <TextBlock x:Name="tblkScore" />
        </StackPanel>
        <Viewbox Grid.Row="1" Stretch="Uniform" HorizontalAlignment="Center">

            <Image x:Name="KinectVideo" Width="640" Height="250" Visibility="Visible" Stretch="Fill" /> 

        </Viewbox>


        <Button x:Name="homeBtn" Content="" Width="50" Click="homeBtn_Click" Height="35" Margin="272,294,277,10" >

            <Button.Background>
                <ImageBrush ImageSource="Images/ContentIcon.png" />
            </Button.Background>

        </Button>
    </Grid>
</Window> 

Answer 1

您的按钮都是固定大小。 StackPanel只是将它们彼此相邻，所以当你的屏幕尺寸更大时，你最终会留下右边的空间。

与您的主页按钮相同。它通过绝对边缘定位。

您可以通过使用6个网格列作为顶部按钮，并删除主页按钮上的边距并将其设置为HorizontalAlignment="Center" VerticalAlignment="Bottom"来使布局流畅。

然而，这仍然会导致按钮上的文本有效缩小。如果您希望显示屏始终具有相同的比例，则可以更轻松地在ViewBox中简单地整理整个内容。

Answer 2

使用grid而不是stackpanel并将列宽设置为“*”并将按钮放在该网格中