Адаптивний интерфейс WPF

Question

Всем привет, относительно недавно начал изучать 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"/>
&lt;/Grid&gt;

</Window>

Вопрос в чем? Вот код, ок, увидели, должен дать одинаковые кнопки, расположенные в столбик, что надо? Какое поведение ожидается? Если речь про "заполнение", то почему кнопки друг за другом и имеют статичный размер? А это вообще, что за ужас? Width="476" Margin="19,30,12,142". Забудьте про дизайнер студии, пишите код сами! — EvgeniyZ, Jun 15 '21 at 20:10

score 4 · Accepted Answer · edited Jun 15 '21 at 21:31

Если я правильно понял ваш вопрос, то вы хотите разместить с левой части список алфавита, а все оставшееся место занять плеером, да так, чтоб при изменении размера окна, элементы подстраивались. Если так, то давайте сделаем нечто такое:

Для начала запомните ряд самых главных правил:

Не используйте дизайнер студии в качестве инструмента для создания интерфейса, он для этого попросту не пригоден, создавая вам код по типу Width="476" Margin="19,30,12,142", из-за чего все ваши элементы будут скакать.
Старайтесь отделять данные от UI, контролы не должны хранить что-либо в себе, их задачи лишь взаимодействовать с пользователем. Научитесь делать привязки, использовать коллекции и др.
Если вы хотите "адаптивный интерфейс", то забудьте про указание статичных размеров, не ограничивайте контролы, дайте им свободу, пусть сами выбирают что и как.

Теперь давайте сделаем простую разметку:

<Grid Margin="5">
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="120"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
&lt;!--#region Левая сторона--&gt;
&lt;ScrollViewer VerticalScrollBarVisibility=&quot;Auto&quot;&gt;
    &lt;ItemsControl Grid.Column=&quot;0&quot; BorderBrush=&quot;Gray&quot; BorderThickness=&quot;0 0 1 0&quot;&gt;
        &lt;ItemsControl.ItemTemplate&gt;
            &lt;DataTemplate&gt;
                &lt;Button Content=&quot;{Binding}&quot; Padding=&quot;10&quot; Margin=&quot;5&quot; MinWidth=&quot;50&quot;/&gt;
            &lt;/DataTemplate&gt;
        &lt;/ItemsControl.ItemTemplate&gt;
        &lt;system:String&gt;А&lt;/system:String&gt;
        &lt;system:String&gt;Б&lt;/system:String&gt;
        &lt;system:String&gt;В&lt;/system:String&gt;
    &lt;/ItemsControl&gt;
&lt;/ScrollViewer&gt;
&lt;!--#endregion--&gt;

&lt;!--#region Правая сторона--&gt;
&lt;MediaElement Grid.Column=&quot;1&quot; Stretch=&quot;UniformToFill&quot;
    Source=&quot;https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4&quot;/&gt;
&lt;!--#endregion--&gt;        

</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 лишь отображает их.

Интересненько, спасибо буду над етим работать =) — KOKO, Jun 16 '21 at 07:40
Привет. извини, подскажи как лучше вставить в WPF большое количество тексту ?) — KOKO, Jun 16 '21 at 17:50
@KOKO Зависит от задачи. Если просто текст, он не слишком большой и не нужно выделение, то можно использовать TextBlock, если нужна возможность выделить мышью, скопировать, может отредактировать, то TextBox в помощь, а если нужно еще и форматирование текста (жирный, курсив и др.), то FlowDocument поможет. Так что, выбираете нужный контрол и привязываете его к свойству, которое содержит в себе текст. — EvgeniyZ, Jun 16 '21 at 18:37

Адаптивний интерфейс WPF

1 Answers1

Linked

Related