Проблемы разрешения C# WPF

У меня проблемы с размером моей программы WPF, чтобы она могла адаптироваться к разрешению экрана пользователя. У меня есть два снимка экрана ниже, один сделан в 1600 x 900, а другой в 1920 x 1080. Ни один из них не соответствует тому, как я хочу, чтобы мое приложение выглядело;

1600 x 900

1920 x 1080

Как вы можете видеть на первом изображении, в более низком разрешении есть части пользовательского интерфейса, которые находятся за пределами экрана. Я мог бы использовать ScrollViewer, но я бы предпочел, чтобы элементы фактически соответствовали экрану по вертикали, а затем использовали ScrollViewer по горизонтали, если это необходимо.

На втором изображении, поскольку я пытался адаптировать программу так, чтобы она соответствовала более низкому разрешению, теперь есть огромное количество неиспользуемого пространства, которое я хотел бы, чтобы пользовательский интерфейс заполнил, а не оставил пустым. Я чувствую, что у меня есть общее представление о * и 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 причиной проблем, но решил сначала опубликовать это на случай, если возникнут какие-либо «очевидные» проблемы с моим макетом.

CBreeze 19.01.2016 источник

comment

Помогает ли это: stackoverflow.com/questions/1114385/ - PaulF 19.01.2016

comment

Единственная проблема с Viewbox заключается в том, что он масштабирует всю страницу, поэтому ваши текстовые поля становятся больше/меньше. - ChrisF 19.01.2016

comment

@ChrisF Тогда была бы подходящая альтернатива ViewBox? просто интересно, прежде чем я начну тестировать с ним - CBreeze 19.01.2016

comment

@CBreeze существует несколько разных способов - например, горизонтальный WrapPanel, но каждый из них имеет значение для вашего дизайна. - ChrisF 19.01.2016

comment

@ChrisF Мой дизайн конкретно или дизайн WPF в целом? - CBreeze 19.01.2016

comment

@CBreeze Ваш дизайн. Если вы используете панель переноса, вам придется потерять сетку, и ваши поля не всегда будут в одном и том же столбце при изменении разрешения. Это плохой UX, поэтому его действительно следует избегать. - ChrisF 19.01.2016

comment

@ChrisF Значит ли это, что мое общее представление о дизайне плохое? - CBreeze 19.01.2016

comment

@CBreeze - нет. Обычное решение — использовать средство просмотра прокрутки или заполнить фон соответствующим образом. - ChrisF 19.01.2016

comment

Я вам скажу, почему это происходит, вы использовали конструктор для создания этого. Если вы сделаете то же самое в коде и сами разместите эти элементы в xaml, вы сами решите проблему. - XAMlMAX 20.01.2016

comment

@XAMlMAX на самом деле я вообще не использовал конструктор. - CBreeze 20.01.2016

comment

Так что вы несете ответственность за эти ужасные, ужасные поля. Тебе должно быть стыдно. Если серьезно, мне кажется, что ваш код должен выполнять масштабирование без каких-либо проблем, однако, возможно, ваш Page определил ширину или высоту. Или даже NavigationFrame. Лично я использую ContentControl, а затем определяю Templates для каждой страницы. - XAMlMAX 21.01.2016

comment

@XAMlMAX Я просто не мог найти другого способа, чтобы Labels совпадало с TextBoxes :( - CBreeze 21.01.2016

comment

Если вам нужно Labels, я бы использовал TextBlock. Из того, что я вижу в вашем xaml, кажется, что вы используете для них не тот контейнер. Вы должны использовать Grid, чтобы содержимое помещалось в сетку. Контейнеры, которые вы используете, не подходят для того, чего вы хотите достичь. Как сказал Мухаммад Башир, вам нужно заменить эти StackPanel на Grid, которые будут охватывать все стороны, придавая вам тот вид, который вы хотите. - XAMlMAX 25.01.2016

comment

@XAMlMAX, поэтому вы бы предложили, чтобы каждый элемент занимал Row из Grid, а не один StackPanel занимал Column из Grid, как я сделал здесь? - CBreeze 25.01.2016

comment

Вместо того, чтобы использовать StackPanel, который будет складывать элементы, я бы использовал там Grid, который будет распределять предметы для вас. Поэтому, когда вы используете StackPanel, вы можете заменить его на Column вместо Grid. Если это имеет смысл. Я приведу пример xaml, чтобы вы могли лучше понять это. - XAMlMAX 25.01.2016

comment

@XAMlMAX, это имеет смысл, и спасибо за вашу помощь. Я просто не знал, как Grid будет отделять TextBlocks без использования Rows? - CBreeze 25.01.2016

comment

Смотрите мой ответ, вы должны просто скопировать и вставить xaml. - XAMlMAX 25.01.2016

comment

@XAMlMAX точно есть! попробовал ваш код, и он работает нормально, хотя в дизайнере выглядит немного забавно, и я бы хотел, чтобы мои заметки TextBlock имели фиксированную высоту и ширину, чтобы они не увеличивались, когда пользователь вводит в них! - CBreeze 25.01.2016

comment

Вы имеете в виду примечания TextBox :-), если это так, вам нужно установить RowSpan на максимальное количество строк в сетке, а затем установить видимость ScrollViewer, чтобы он был видимым, а TextWrap на WrapWithOverflow. Если мой ответ помог принять или проголосовать, приятно быть оцененным. - XAMlMAX 25.01.2016

comment

Честно говоря, я думаю, что теперь вам осталось узнать, как определенные UIElements работают в WPF, чтобы заставить экран работать так, как вы хотите. Один вопрос, что ты имеешь в виду под тем, что экран выглядит странно? - XAMlMAX 25.01.2016

Ответы (2)

arrow_upward
1
arrow_downward

Вот кое-что, что, я думаю, должно дать вам представление о том, как размещать элементы на экране.

<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, вставьте мой код и посмотрите, как он изменяет размер в дизайнере.

XAMlMAX 25.01.2016

arrow_upward
0
arrow_downward

Для адаптивного редизайна вы должны использовать панельный подход. Вы должны добавить несколько панелей стека и обернуть панели, чтобы сделать это. Вы должны избегать MARGIN, а также высоты и ширины панелей. Ну, это непростая тема, чтобы закрыть ее одним ответом.

Я могу переделать для вас всю панель за 30-40 минут. Тогда это было бы приемлемо, но я должен использовать вашу учетную запись Team Viewer и делать это на вашем ПК. Я вставил код в свое приложение, но там много ошибок и ошибок. дайте мне знать, если вы хотите, чтобы я переделал его.

Muhammad Bashir 19.01.2016

Проблемы разрешения C# WPF

Ответы (2)

Похожие вопросы