调整窗口元素大小时移动

Question

我正在研究用于学习的wpf宾果应用程序。

当应用程序处于全屏状态时，它看起来我想要它：

然而，当窗口最小化时，元素移出我想要的位置：

无论窗口大小如何，我该怎么做才能阻止这种情况并将元素保存在一个地方。

以下是我完整的XAML代码：

<Window x:Class="Bingo_Game.MainGame"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Bingo_Game"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainGame" WindowStartupLocation="CenterScreen" WindowState="Maximized" Height="704.2">
    <Window.Background>
        <ImageBrush ImageSource="Images/background.jpg"/>
    </Window.Background>
    <Grid>
        <DataGrid Name="grid" ItemsSource="{Binding}" Height="300"
          AutoGenerateColumns="False" HeadersVisibility="None" Background="Transparent" BorderThickness="0" CanUserAddRows="false"
          VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Center" VerticalAlignment="Top" RowHeight="40" Margin="10,0" HorizontalContentAlignment="Center">
            <DataGrid.Resources>
                <local:ItemExistInRangeConverter x:Key="ItemExistInRangeConverter"/>
                <Style x:Key="BackgroundColourStyle" TargetType="{x:Type TextBlock}">
                    <Style.Triggers>
                        <DataTrigger Value="True">
                            <DataTrigger.Binding>
                                <MultiBinding Converter="{StaticResource ItemExistInRangeConverter}">
                                    <Binding Path="Text" RelativeSource="{RelativeSource Self}"/>
                                    <Binding Path="DataContext.RangeNumbers" 
                                RelativeSource="{RelativeSource FindAncestor,
                                                  AncestorType=DataGrid}"/>
                                </MultiBinding>
                            </DataTrigger.Binding>
                            <Setter Property="Background" Value="LightGreen" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.Resources>
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Path=Number}" 
            ElementStyle="{StaticResource BackgroundColourStyle}" MinWidth="65">
                </DataGridTextColumn>

            </DataGrid.Columns>

            <DataGrid.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </DataGrid.ItemsPanel>
        </DataGrid>
        <Button Content="Roll Number" Margin="333,139,323,484" Width="104" Click="newNumber" Height="50" RenderTransformOrigin="-1.01,-1.46" HorizontalAlignment="Center" VerticalAlignment="Center" >
            <Button.Effect>
                <DropShadowEffect/>
            </Button.Effect>
        </Button>
        <TextBlock HorizontalAlignment="Center" Margin="240,187,217,340" TextWrapping="Wrap" Name="number" VerticalAlignment="Center" Height="146" Width="303" FontSize="120" FontWeight="Bold" TextAlignment="Center" Foreground="Black" Grid.IsSharedSizeScope="True"/>
        <DataGrid HorizontalAlignment="Left" Margin="0,544,0,0" VerticalAlignment="Top" RenderTransformOrigin="-2.917,-2.923" Height="119" Width="330" Name="calledGrid" ItemsSource="{Binding}" />
        <TextBlock HorizontalAlignment="Center" Height="33" Margin="240,333,226,307" TextWrapping="Wrap"  VerticalAlignment="Center" Width="294" Name="noneLeft" FontSize="16" FontWeight="Bold" TextAlignment="Center" />
        <TextBlock HorizontalAlignment="Center" Height="33" Margin="240,300,226,340" TextWrapping="Wrap"  VerticalAlignment="Center" Width="294" Name="callTB" TextAlignment="Center" FontSize="20" />

    </Grid>
</Window>

Answer 1

除了列出的MSDN链接DROP table users之外，还要阅读this overview of the WPF Panel元素，以了解如何在WPF中处理UI布局。尽管您可以在Visual Studio中拖放（并调整大小）控件，但它通常会导致布局不能很好地扩展，并引入了额外的编译（许多控件上的额外Margin属性）。

如果您不打算阻止用户调整控件的大小，那么在操作窗口时，如果元素缩放，移动，保持固定到特定窗口边缘，则值得考虑元素的行为方式等等。

使用各种面板布局UI有许多不同的方法，但是您希望的行为决定哪种方式最简单/最合适。

这是一个使用Grid的小型（但不是很整洁）模拟，粗略估计您的第一个案例（您的一些元素被一些简单的标签取代）。

<Grid Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Content="Your DataGrid" Grid.Column="1" Grid.Row="0" Background="Red" Grid.ColumnSpan="3"/>
    <Label Content="Your Other DataGrid" Grid.Column="0" Grid.Row="1" Background="Green" Grid.ColumnSpan="2"/>
    <Label Content="Your Button" Grid.Column="2" Grid.Row="2" Background="Gray" Height="40" Width="100"/>
    <Label Content="41" Grid.Column="2" Grid.Row="1" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/>
</Grid>

它会产生如下所示的内容：

围绕调整大小，一些元素将拉伸，一些（具有固定的高度/宽度），将保持相同的大小，并相对于窗口大小移动。

如果您希望将元素停靠在窗口侧面，请查看DockPanel，如果您需要同时收集一些控件，请查看StackPanel.

Answer 2

检查this。它指出，为了防止这种情况，您可以设置网格并将元素放在已定义大小的列和行中，以防止它们重新调整窗口大小。

另外，您可以查看有关Windows Presentation Foundation（WPF）布局系统here的好文章。