Статьи

Фон изображения, изменения ориентации и контроль видимости

Ноябрь 29, 2018

Я думал о том, чтобы вывести приложение на Marketplace самостоятельно. Я выдвинул несколько идей. Пока не знаю, смогу ли я заставить их работать, но я обязательно попробую.

Конечно, с этой идеей на заднем плане еще многое предстоит узнать о разработке для Windows Phone 7. Но, с учетом того, что я узнал до сих пор, я думаю, что я действительно мог бы попробовать.

Я, конечно, буду сообщать каждый шаг здесь, в моем блоге.

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

Еще одна вещь, которую я хочу посмотреть, это то, что происходит, когда я включаю эмулятор. Будет ли мое приложение отображаться правильно? И если нет, как я могу сделать это правильно? И как это меняет макет моего приложения?

Итак, есть еще несколько вещей, которые мне нужно знать, прежде чем я действительно смогу начать работу над реальным приложением.

Итак, я просто собираюсь создать еще один проект в Visual Studio.

Первое, что я хочу сделать, это запустить приложение и повернуть эмулятор:

1

Ну, это не сработает. Все заперто на местах. Способ исправить это простое свойство на странице приложения:

SupportedOrientations="Portrait" Orientation="Portrait"

Я изменяю это свойство в окне свойств:

2

Это изменит свойство Orientation в XAML, и я могу повернуть эмулятор в любом случае при запуске приложения:

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

1a

Теперь все встает на свои места, в зависимости от того, как я включаю эмулятор или позже устройство.

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

Вот как я это делаю: я помещаю курсор мыши в сетку LayoutRoot, и затем я могу перейти к окну свойств, где я могу изменить свойство фона с Transparency на изображение, которое я выбрал в качестве фона:

3

Все идет нормально. Давайте запустим это:

4                   4а

Он переориентируется, когда я включаю эмулятор. Единственное, что здесь осталось, это установить правильные пропорции. Я делаю это, изменяя свойство Stretch этого изображения с Fill на UniformToFill.

Теперь я перетащил элемент управления Textblock в основную форму:

4b

Теперь проблема в том, что я должен убедиться, что мой текст читаем, а изображение на заднем плане. Полезным элементом управления для этого является элемент управления Rectangle. Давайте перетащим один прямо на элемент управления Textblock. Я собираюсь немного отредактировать это в моем XAML. То, что я хочу, это элемент управления Rectangle позади элемента управления Textblock, но перед самим изображением. Первое, что я здесь делаю, это изменяю непрозрачность элемента управления Rectangle.

5

Когда я запускаю его сейчас и включаю эмулятор, у меня все же возникает другая проблема:

5a

И мой Textblock, и мой Rectangle не растягиваются на всю ширину моего эмулятора, когда он находится в ландшафтном режиме. Для того, чтобы это исправить, я устанавливаю горизонтальное выравнивание обоих элементов управления на «Растянуть» и устанавливаю настройку левого поля обоих элементов управления на «0». Наконец, я собираюсь полностью удалить свойство Width для обоих элементов управления:

<Rectangle Height="260"
           HorizontalAlignment="Stretch"
           Margin="0,6,0,0"
           Name="rectangle1"
           Stroke="Black"
           StrokeThickness="1"
           VerticalAlignment="Top"
           
           Fill="#56000000" />
<TextBlock Height="176"
           HorizontalAlignment="Stretch"
           Margin="0,6,0,0"
           Name="textBlock1"
           Text="Hello World"
           VerticalAlignment="Top"

Когда я запускаю его сейчас, мой Textblock и мой Rectangle красиво заполняют ширину:

6

Давайте двигаться дальше. В одной из моих идей для приложения мне нужно разрешить пользователю редактировать значения, которые на данный момент доступны только для чтения. Я хочу, чтобы текстовый блок перевернулся в текстовое поле. Есть маленькая хитрость. Давайте перетащим текстовое поле на дизайнер:

6а

Я собираюсь установить свойства Textbox равными свойствам Textblock в XAML. Я также очищаю текстовое свойство Textbox. Свойство text для текстового блока изменяется на «Hello World».

Теперь мне нужен еще один элемент управления, кнопка:

<Button Name="myButton"
        HorizontalAlignment="Stretch"
        Margin="0,200,0,0"
        VerticalAlignment="Top"
        Width="250"
        Content="Edit"
        Click="myButton_Click"
        />

Теперь мне нужно написать код внутри моего обработчика событий. Когда кто-то нажимает кнопку «Редактировать», я хочу, чтобы текстовый блок переворачивался в текстовое поле и возвращался в текстовый блок при повторном нажатии кнопки:

private void myButton_Click(object sender, RoutedEventArgs e)
{
    if (textBox1.Visibility == System.Windows.Visibility.Visible)
    {
        myButton.Content = "Edit";
        textBlock1.Text = textBox1.Text;
        textBox1.Visibility = System.Windows.Visibility.Collapsed;
        textBlock1.Visibility = System.Windows.Visibility.Visible;
    }
    else
    {
        myButton.Content = "Save";
        textBox1.Text = textBlock1.Text;
        textBox1.Visibility = System.Windows.Visibility.Visible;
        textBlock1.Visibility = System.Windows.Visibility.Collapsed;
    }

То, что я делаю здесь, сначала проверяет, является ли текстовое поле видимым. Если это так, то выполняется первый кодовый блок («если»). Если нет, то выполняется второй кодовый блок («else»). В общем, я переключаюсь между видимостью текстового поля и текстового блока. Когда кто-то нажимает кнопку «Редактировать», я хочу получить значение текстового поля и вернуть его обратно в текстовый блок. Еще одна вещь, которую нужно сделать. В моем XAML я собираюсь установить начальную видимость текстового блока на «Видимый» и начальную видимость текстового поля на «Свернутый»:

<TextBlock Height="176"
           HorizontalAlignment="Stretch"
           Margin="0,6,0,0"
           Name="textBlock1"
           Text="Hello World"
           VerticalAlignment="Top"
           Visibility="Visible"
           />
<TextBox Height="176"
         HorizontalAlignment="Stretch"
         Margin="0,6,0,0"
         Name="textBox1"
         Text=""
         VerticalAlignment="Top"
         Visibility="Collapsed"
          />

Давайте посмотрим это в действии. Когда я нажимаю кнопку «Изменить», приложение скрывает текстовый блок, открывает текстовое поле и вводит значение, чтобы я мог его редактировать:

7    7b    7c    7d

Когда я нажимаю кнопку «Сохранить», она сворачивает текстовое поле, снова открывает текстовый блок и помещает значение из текстового поля обратно в текстовый блок.

Подводя итог, я установил фон изображения, я удостоверился, что пропорции правильны как в портретном, так и в альбомном режиме, я убедился, что мой текст остается читаемым с фоновым изображением, и я разрешаю пользователю редактировать ценности.

С учетом сказанного я думаю, что пришло время начать работу над приложением.

 

Продолжение следует…


40
Share: