Question

我在调整WPF程序大小时遇到问题，以便能够适应用户屏幕的分辨率。我在下面有两个屏幕截图，一个是1600 x 900，一个是1920 x 1080。它们都不是我希望我的应用程序看起来的;

1600 x 900

1920 x 1080

从第一张图片中可以看出，在较低分辨率下，UI的某些部分就在屏幕之外。我可以使用ScrollViewer，但我更希望元素实际上垂直适合屏幕，然后在必要时水平使用ScrollViewer。

在第二张图片中，因为我试图调整程序以使其适合较低的分辨率，所以现在有大量未使用的空间我希望UI填充，而不是留空。我觉得我对*和auto的整体理解是宽度，但感觉总体布局是错误的。以下是这些屏幕截图的一些XAML快照;

         <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="auto" MinWidth="180"/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="250"/>
                <ColumnDefinition Width="auto" MaxWidth="160"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Rectangle Fill="#FF5FCFBA" Stroke="Black" Grid.ColumnSpan="4" Grid.RowSpan="2"/>
            <Label x:Name="jobTitleLabel" Content="Job" HorizontalAlignment="Left" Margin="26,10,0,5" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Grid.ColumnSpan="4"/>
            <StackPanel Grid.Row="1" >
                <Label Content="Reference:" FontSize="14" HorizontalAlignment="Right" Margin="0,0,0,1" VerticalAlignment="Center" />
                <Label Content="Description:" FontSize="14" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Center" />
                <Label Content="Created:" FontSize="14" HorizontalAlignment="Right" Margin="0,5,0,0" Grid.Row="1" VerticalAlignment="Center" />
                <Label Content="Deadline:" FontSize="14" HorizontalAlignment="Right" Grid.Row="2" VerticalAlignment="Center" Margin="-2,7,0,0" />
                <Label Content="Start Date:" FontSize="14" HorizontalAlignment="Right" Grid.Row="2" VerticalAlignment="Center" Margin="-2,7,0,0" />
                <Label Content="Employee Name:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,4,0,0" />
                <Label Content="Who's Job:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,7,0,0" />
                <Label Content="Priority:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,7,0,0" />
            </StackPanel>
            <StackPanel Grid.Column="1" Grid.Row="1">
                <TextBox x:Name="jobReferenceTextBox" Margin="5" FontSize="14" Grid.Column="1" VerticalAlignment="Center"/>
                <TextBox x:Name="jobTitleTextBox" Margin="5" FontSize="14" Grid.Column="1" VerticalAlignment="Center" MaxWidth="291" MaxLength="30"/>
                <wpftk:DateTimePicker x:Name="createdPicker" AutoCloseCalendar="True"  
                                      Margin="5,7,5,5" Format="Custom" FormatString="dd/MM/yyyy"
                                      FontSize="14" TextAlignment="Left" 
                                      TimeFormat="LongDate" TimePickerAllowSpin="False" 
                                      TimePickerShowButtonSpinner="False" 
                                      TimePickerVisibility="Hidden" ShowButtonSpinner="False"
                                      AllowTextInput="False"/>
                <wpftk:DateTimePicker x:Name="deadlinePicker" AutoCloseCalendar="True" Margin="5,8,5,5" Format="Custom" FormatString="dd/MM/yyyy" FontSize="14" TextAlignment="Left" TimeFormat="LongDate" TimePickerShowButtonSpinner="False" TimePickerAllowSpin="False" TimePickerVisibility="Hidden" ShowButtonSpinner="False"/>
                <wpftk:DateTimePicker x:Name="startDatePicker" AutoCloseCalendar="True" Margin="5,8,5,5" Format="Custom" FormatString="dd/MM/yyyy" FontSize="14" TextAlignment="Left" TimeFormat="LongDate" TimePickerShowButtonSpinner="False" TimePickerAllowSpin="False" TimePickerVisibility="Hidden" ShowButtonSpinner="False"/>
                <TextBox x:Name="nameTextBox" Margin="5,6,5,5" FontSize="14" Grid.Column="1" Grid.Row="3" VerticalAlignment="Center" />
                <ComboBox x:Name="itNameComboBox" Margin="5,7,5,5" FontSize="14" SelectedValuePath="Tag">
                    <ComboBoxItem Content="Unallocated" Tag="Unallocated"/>
                    <ComboBoxItem Content="Adam" Tag="AdamD"/>
                    <ComboBoxItem Content="Chris" Tag="Chris"/>
                    <ComboBoxItem Content="Dan" Tag="DanD"/>
                    <ComboBoxItem Content="Emily" Tag="EmilyC"/>
                    <ComboBoxItem Content="Kit" Tag="KitL"/>
                    <ComboBoxItem Content="Matt" Tag="Matt"/>
                </ComboBox>
                <ComboBox x:Name="priorityComboBox" Margin="5,7,5,5" FontSize="14" SelectedValuePath="Tag">
                    <ComboBoxItem Content="High" Tag="High"/>
                    <ComboBoxItem Content="Medium" Tag="Medium"  />
                    <ComboBoxItem Content="Low" Tag="Low"  />
                </ComboBox>
            </StackPanel>
            <StackPanel Grid.Column="3" Grid.Row="1">
                <ComboBox x:Name="jobPresetComboBox" IsEnabled="False" IsEditable="True" IsReadOnly="True" Text="Choose Predefined Job"  Margin="5"  FontSize="14" Grid.Column="1" Grid.Row="4" SelectionChanged="JobPresetComboBoxSelectionChanged" />
                <Button x:Name="addJobButton" Content="Add a New Job" Margin="5" Click="AddJob" FontSize="14" Grid.Column="1" Grid.Row="4" />
                <Button x:Name="updateButton" Content="Update Job Details" Margin="5" FontSize="14" Grid.Column="1" Grid.Row="4" Click="UpdateJob"/>
                <Button x:Name="markAsCompletedButton" Content="Mark as Completed" Margin="5" FontSize="14" Click="MarkAsCompleted"/>
                <Button x:Name="deleteButton" Content="Delete Job" Margin="5" FontSize="14" Click="DeleteJobPermanently"/>
                <Button x:Name="excelButton" Content="Export to Excel" Margin="5" FontSize="14" Click="ExportToExcel"/>
                <Button x:Name="restoreButton" Content="Restore Selected Job" Margin="5" FontSize="14" Visibility="Collapsed" Click="RestoreJob"/>
                <Button x:Name="addToHistoryButton" Content="Add to History" Margin="5" FontSize="14" Visibility="Collapsed" Click="AddJobToHistory"/>
                <Button x:Name="cancelButton" Content="Cancel Job Add" Margin="5" FontSize="14" Visibility="Collapsed" Click="CancelJobAdd"/>
            </StackPanel>
            <StackPanel Grid.Column="2" Grid.Row="1">
                <TextBox x:Name="notesTextBox" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="5" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" AcceptsReturn="True" MinHeight="260" MaxHeight="260" MaxWidth="400" MinWidth="400"/>
            </StackPanel>
            <Grid x:Name="bnumGrid" Grid.Column="4" Grid.Row="1" Margin="8,0,10,0" MinWidth="250">
                <DataGrid x:Name="bnumDataGrid" ItemsSource="{Binding CurrentBnumsCollectionView}" MaxHeight="270"
                      CanUserAddRows="False" AutoGenerateColumns="False" SelectionChanged="BnumDataGridSelectionChanged"
                      IsReadOnly="True">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="Job ID" Width="0.75*" Binding="{Binding JobID}"/>
                        <DataGridTextColumn Header="Job Description" Width="3*" Binding="{Binding JobDescription}"/>
                    </DataGrid.Columns>
                </DataGrid>
            </Grid>
            <StackPanel x:Name="searchGrid" Grid.Row="1" Grid.Column="5">
                <Label Content="Search (ID)" HorizontalAlignment="Left" Margin="5,5,0,5" VerticalAlignment="Center" FontSize="20" FontWeight="Bold"/>
                <TextBox x:Name="searchBox" TextWrapping="Wrap" Margin="20,5" FontSize="14" VerticalAlignment="Center" TextChanged="CallSearchBoxFilter"/>
                <Label Content="Press Esc to clear filter" Margin="5,10,5,5" FontSize="14"/>
            </StackPanel>
        </Grid>

可以理解的是，其中包含了许多不相关的代码，但我并不想错过一些我没有看到的东西。整体布局位于NavigationFrame内Page，位于Window内，以便我可以在我的程序中浏览页面。

在此特定页面上有一个Grid，其中包含两行，一行包含DataGrid，另一行包含上图中的元素。我不确定是否是导致问题的父Grid，但我认为我会先发布这个问题，以防万一＆＃34;显而易见＆＃34;我的布局问题。

Answer 1

我认为这可以让您了解如何在屏幕上放置项目。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Grid.ColumnSpan="5" Grid.RowSpan="6" Fill="Red"/>
    <TextBlock Text="Reference:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
    <TextBlock Text="Description:" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
    <TextBox Grid.Column="1" />
    <TextBox Grid.Column="1" Grid.Row="1" />
    <TextBox Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="5" Text="Mahoosive Text Box" />
    <ComboBox Grid.Column="4"/>
    <ComboBox Grid.Column="4" Grid.Row="1"/>
    <Button Content="Save New Job" Grid.Column="4" Margin="5" Grid.Row="2" />
    <DataGrid Grid.Column="5" Grid.RowSpan="7">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Job ID"/>
        </DataGrid.Columns>
    </DataGrid>
    <TextBlock Grid.Column="6" Text="Search (ID)"/>
    <TextBox Grid.Column="6" Grid.Row="1" TextWrapping="Wrap" Text="TextBox"/>

</Grid>

正如我们在评论中所说，这就是我的意思创建一个测试UserControl，粘贴我的代码并观察它在设计器中的大小调整。

Answer 2

对于收养重新设计，您必须采用面板方法。您可以添加一些堆栈面板和包装面板来执行此操作。你必须避免MARGIN的东西和面板的高度和宽度。那么在一个答案中关闭它并不是一个简单的话题。

我可以在30到40分钟内为您重新设计整个面板。那将是收养，但我必须使用您的Team Viewer帐户并在您的PC中执行。我已将代码粘贴到我的应用程序中，但是有很多错误和错误。让我知道，如果你想让我重新设计它。

解决问题C＃WPF

2 个答案: