Адаптивний интерфейс WPF
Всем привет, относительно недавно начал изучать WPF, что посоветуете по адаптивному дизайну вроде как его еще називають "жидким" У меня есть окно которое должно при растяжении на весь экран пропорционально растягивать элементы управления и т.д... Вот примерный код зарание всем спасибо)
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:PRAKTIKA_FULL"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" x:Class="PRAKTIKA_FULL.Alphabet"
mc:Ignorable="d"
Title="Алфавіт" Height="600" Width="800" Background="{x:Null}">
<Grid Background="#FF3C3939"
Height="597"
VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="285"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="612"/>
</Grid.RowDefinitions>
<ScrollViewer
VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" Width="188" HorizontalAlignment="Center" Margin="16,0,81,112" Grid.Row="1" >
<StackPanel
HorizontalAlignment="Center"
Height="1575"
VerticalAlignment="Center"
Width="214" Grid.RowSpan="4">
<Button Content="А" Click="A_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Б" Click="B_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="В" Click="V_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Г" Click="H_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ґ" Click="H1_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Д" Click="D_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Е" Click="E_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Э" Click="E1_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ж" Click="G_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="З" Click="Z_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="И" Click="I_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="І" Click="I1_Click" Height="37"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ї" Click="I2_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Й" Click="J1_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="К" Click="K_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Л" Click="L_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="М" Click="MM_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Н" Click="N_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="О" Click="O_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="П" Click="P_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Р" Click="R_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="С" Click="C_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Т" Click="TTT_Click" Height="37"/>
<Separator Opacity="0" Height="5"/>
<Button Content="У" Click="Y_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ф" Click="F_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Х" Click="X_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ц" Click="TS_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ч" Click="CH_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ш" Click="SH_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Щ" Click="SH1_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ь" Click="J_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Ю" Click="YU_Click" Height="39"/>
<Separator Opacity="0" Height="5"/>
<Button Content="Я" Click="YA_Click" Height="39"/>
</StackPanel>
</ScrollViewer>
<MediaElement
x:Name="Media"
Grid.Column="1"
HorizontalAlignment="Center"
Height="440"
VerticalAlignment="Center"
Width="476" Margin="19,30,12,142" Grid.Row="1"/>
</Grid>
</Window>
Ответы (1 шт):
Если я правильно понял ваш вопрос, то вы хотите разместить с левой части список алфавита, а все оставшееся место занять плеером, да так, чтоб при изменении размера окна, элементы подстраивались. Если так, то давайте сделаем нечто такое:
Для начала запомните ряд самых главных правил:
Не используйте дизайнер студии в качестве инструмента для создания интерфейса, он для этого попросту не пригоден, создавая вам код по типу
Width="476" Margin="19,30,12,142", из-за чего все ваши элементы будут скакать.Старайтесь отделять данные от UI, контролы не должны хранить что-либо в себе, их задачи лишь взаимодействовать с пользователем. Научитесь делать привязки, использовать коллекции и др.
Если вы хотите "адаптивный интерфейс", то забудьте про указание статичных размеров, не ограничивайте контролы, дайте им свободу, пусть сами выбирают что и как.
Теперь давайте сделаем простую разметку:
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="120"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<!--#region Левая сторона-->
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl Grid.Column="0" BorderBrush="Gray" BorderThickness="0 0 1 0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding}" Padding="10" Margin="5" MinWidth="50"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<system:String>А</system:String>
<system:String>Б</system:String>
<system:String>В</system:String>
</ItemsControl>
</ScrollViewer>
<!--#endregion-->
<!--#region Правая сторона-->
<MediaElement Grid.Column="1" Stretch="UniformToFill"
Source="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4"/>
<!--#endregion-->
</Grid>
Заметьте, тут не используются явные размеры, мы играемся только с пропорциями и позиционированием объектов.
В итоге получаем следующее:
Как видите, наш интерфейс успешно подстраивается под изменения окна. Осталось избавиться от статичного контента и сделать нужную логику. Давайте покажу самое простое, как избавиться от данных в контолах:
Удаляем
<system:String>А</system:String> <system:String>Б</system:String> <system:String>В</system:String>Дописываем
<ItemsControl ItemsSource="{Binding Items}"В c# коде окна пишем прям в конструкторе
DataContext = this.Рядом с конструктором пишем
public char[] Items { get; } = "абвгдеёжзийклмнопрстуфхцчшщъыьэюя".ToCharArray();
Весь код получается такой:
public char[] Items { get; } = "абвгдеёжзийклмнопрстуфхцчшщъыьэюя".ToCharArray();
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
Вот вы и научились простой привязке данных, где нужные данные находятся в отдельном списке, а UI лишь отображает их.