Grid #2

И так, в прошлом уроке мы научились создавать разметку и размещать в ней объекты. Сегодня же я предлагаю написать максимально простое WPF-приложение. По ходу написания которого мы поймем как взаимодействуют между собой xaml-объекты и каким образом можно корректировать Grid.

И так, наша программа будет выводить рандомное число( от 0 до 100 ) при нажатии на кнопку.

Планирование

Для начала давайте спланируем каким образом будет работать наша программа.
- Тут все просто, при нажатии на кнопку наша программа должна выдавать рандомное число.
- Но как?
- При помощи класса Random и метода Next(Int32).
- Куда будет выводиться число?
- Это будет просто замена текста в label.

Да, перед написанием любой программы в вашей голове должен происходить подобный диалог с самим собой. Главное не в слух, а то знакомые могут сдать в психушку :D

Практика

Все, шутки в сторону начинаем писать код! Для начала создадим Grid-разметку.

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition/>
            <RowDefinition Height="70"/>
            <RowDefinition/>
            <RowDefinition Height="70"/>
        </Grid.RowDefinitions>

Прошу заметить что высоту строк, так же как и ширину колон можно корректировать при помощи аргументов Height и Width соответственно.

Теперь добавим Button и Label в эту разметку.

<Button x:Name="btn" Content="Число" Grid.Column="2" Grid.Row="3" Margin="20,30" ></Button>
<Label x:Name="label" Content="Число от 0 до 100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="1" Margin="10"></Label>

В этом коде присутствует несколько элементов которые мы не разбирали в прошлом уроке:

• Grid.Column(Row)Span. Он позволяет растянуть элемент на несколько колон/строк, кол-во колон/строк для растяжения считается с одного. То есть фраза Grid.ColumnSpan="3" означает что Label нужно растянуть на 1, 2 и 3 колонки( считая с 0!!!!).
• x:Name - тут все просто. Мы просто задаем имя объекту, к этому имени мы будем обращаться при написании backend`а программы.

Сейчас наше приложение должно выглядеть следующим образом:

Да, с цветами не густо, но это не моя главная задача на данный момент! Если у вас есть желание сделайте годный дизайн.

Теперь предлагаю написать backend нашей программы, ведь без него это просто картинка.

Для начала кликнем два раза на кнопку и получим ее функцию в файле MainWindow.xaml.cs. Тут создадим экземпляр класса Random и передадим его значение в label.Content. Но перед тем как передавать, его нужно обязательно конвертировать в строку. Так как label.Content принимает только строки, а Random.Next() выдает int32 переменную.

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        
        private void btn_Click(object sender, RoutedEventArgs e)
        {
            Random random = new Random();
            
            label.Content = Convert.ToString(random.Next(100));
        }
    }

В целом все, наш код выглядит следующим образом и работает идеально.

Удачи программисты!