Урок 7. Пользовательские настройки

Боковое меню

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

Удалим кнопку BackPictureBox, по которой возвращаемся на экран входа - для выхода из учетки будем использовать пункт меню Выйти, который создадим позже в уроке. Не забудем удалить условие и Execution, связанные с этой кнопкой, а для HeadTitleLabel скорректировать координаты Left и Width. Если не исправить расчет ширины Label, то объект будет перекрывать иконку меню.

Создадим кнопку, которую назовем MenuPictureBox:

TemplateMainForm.xml

<MyObject Name="MenuPictureBox" Type="PictureBox" Assembly="BaseControls">
  <Top>
    <Calculate>
      <Expression>Ceiling(({0} - {1}) / 2)</Expression>
      <Items>
        <Item>
          <Object Name="HeadPanel">
            <Property Name="Height" />
          </Object>
        </Item>
        <Item>
          <Object Name="MenuPictureBox">
            <Property Name="Height" />
          </Object>
        </Item>
      </Items>
    </Calculate>
  </Top>
  <Right>50</Right>
  <Height>30</Height>
  <Width>30</Width>
  <Image>
    <Switch>
      <Case>
        <When>
          <Condition Name="AppThemeDarkEqualCondition" />
        </When>
        <Then>Images\menu-light.png</Then>
      </Case>
      <Case>Images\menu-dark.png</Case>
    </Switch>
  </Image>
</MyObject>

Создадим условие проверки, был ли совершен тап по объекту

TemplateMainForm.xml

<Condition Name="MenuPictureBoxClickCondition" Type="ClickCondition" Assembly="Conditions">
  <Object Name="MenuPictureBox" />
</Condition>

Панель меню

<MyObject Name="MenuPanel" Type="Panel" Assembly="BaseControls">
  <Top>0</Top>
  <Left>0</Left>
  <Height>
    <Form>
      <Property Name="Height" />
    </Form>
  </Height>
  <Width>
    <Form>
      <Property Name="Width" />
    </Form>
  </Width>
  <Visible>False</Visible>

  <MyObject Name="InnerMenuPanel" Type="Panel" Assembly="BaseControls">
    <Top>0</Top>
    <Left>
      <Object Name="MenuPanel">
        <Property Name="Width" />
      </Object>
    </Left>
    <Height>
      <Object Name="MenuPanel">
        <Property Name="Height" />
      </Object>
    </Height>
    <Width>
      <Formula>
        <Minus DataType="IntegerDataType">
          <Item>
            <Object Name="MenuPanel">
              <Property Name="Width" />
            </Object>
          </Item>
          <Item>56</Item>
        </Minus>
      </Formula>
    </Width>
    <BackColor>
      <Switch>
        <Case>
          <When>
            <Condition Name="AppThemeDarkEqualCondition" />
          </When>
          <Then>MostlyBlack</Then>
        </Case>
        <Case>VeryLightGray</Case>
      </Switch>
    </BackColor>
  </MyObject>
</MyObject>

Показываем меню

TemplateMainForm.xml

<Command Name="MenuPanelVisibleValueSetCommand" Type="ValueSetCommand" Assembly="Commands">
  <Object Name="MenuPanel">
    <Property Name="Visible">
      <Input />
    </Property>
  </Object>
</Command>

TemplateMainForm.xml

<Command Name="ShowMenuPanelAnimatedValueSetCommand" Type="AnimatedValueSetCommand" Assembly="Commands">
  <Object Name="InnerMenuPanel">
    <Property Name="Left" />
  </Object>
  <StartValue>
    <Object Name="MenuPanel">
      <Property Name="Width" />
    </Object>
  </StartValue>
  <FinishValue>
    <Formula>
      <Minus DataType="IntegerDataType">
        <Item>
          <Object Name="MenuPanel">
            <Property Name="Width" />
          </Object>
        </Item>
        <Item>
          <Object Name="InnerMenuPanel">
            <Property Name="Width" />
          </Object>
        </Item>
      </Minus>
    </Formula>
  </FinishValue>
  <Length>200</Length>
  <Easing>Linear</Easing>
</Command>

TemplateMainForm.xml

<Execution>
  <ConditionExpression>
    <Condition Name="MenuPictureBoxClickCondition" />
  </ConditionExpression>
  <Commands>
    <Command Name="MenuPanelVisibleValueSetCommand">True</Command>
    <Command Name="ShowMenuPanelAnimatedValueSetCommand" />
  </Commands>
</Execution>

Прячем меню

TemplateMainForm.xml

<Command Name="HideMenuPanelAnimatedValueSetCommand" Type="AnimatedValueSetCommand" Assembly="Commands">
  <Object Name="InnerMenuPanel">
    <Property Name="Left" />
  </Object>
  <StartValue>
    <Formula>
      <Minus DataType="IntegerDataType">
        <Item>
          <Object Name="MenuPanel">
            <Property Name="Width" />
          </Object>
        </Item>
        <Item>
          <Object Name="InnerMenuPanel">
            <Property Name="Width" />
          </Object>
        </Item>
      </Minus>
    </Formula>
  </StartValue>
  <FinishValue>
    <Object Name="MenuPanel">
      <Property Name="Width" />
    </Object>
  </FinishValue>
  <Length>200</Length>
  <Easing>Linear</Easing>
  <FinishedCommands>
    <Command Name="MenuPanelVisibleValueSetCommand">False</Command>
  </FinishedCommands>
</Command>

TemplateMainForm.xml

<Execution>
  <ConditionExpression>
    <Condition Name="InnerMenuPanelSwipeRightCondition" />
  </ConditionExpression>
  <Commands>
    <Command Name="HideMenuPanelAnimatedValueSetCommand" />
  </Commands>
</Execution>

Затенение экрана

Добавим описание панели, которую будем использовать для затемнения основного контента, при открытии бокового меню. Вставим следующий код в описание панели MenuPanel над кодом объекта InnerMenuPanel:

TemplateMainForm.xml

<MyObject Name="FogPanel" Type="Panel" Assembly="BaseControls">
  <Top>0</Top>
  <Left>0</Left>
  <Height>
    <Object Name="MenuPanel">
      <Property Name="Height" />
    </Object>
  </Height>
  <Width>
    <Object Name="MenuPanel">
      <Property Name="Width" />
    </Object>
  </Width>
  <BackColor>
    <Switch>
      <Case>
        <When>
          <Condition Name="AppThemeDarkEqualCondition" />
        </When>
        <Then>Black</Then>
      </Case>
      <Case>MostlyBlack</Case>
    </Switch>
  </BackColor>
</MyObject>

Панель затемнения будет занимать всю площадь MenuPanel, а следовательно и всей формы.

Для создания эффекта плавного затемнения будем менять прозрачность панели FogPanel через ее set-проперти Opacity, используя команду типа AnimatedValueSetCommand:

TemplateMainForm.xml

<Command Name="FogPanelСhangeOpacityAnimatedValueSetCommand" Type="AnimatedValueSetCommand" Assembly="Commands">
  <Object Name="FogPanel">
    <Property Name="Opacity" />
  </Object>
  <StartValue>
    <Switch>
      <Case>
        <When>
          <Input Name="Show" />
        </When>
        <Then>0</Then>
      </Case>
      <Case>0.5</Case>
    </Switch>
  </StartValue>
  <FinishValue>
    <Switch>
      <Case>
        <When>
          <Input Name="Show" />
        </When>
        <Then>0.5</Then>
      </Case>
      <Case>0</Case>
    </Switch>
  </FinishValue>
  <Length>200</Length>
  <Easing>Linear</Easing>
</Command>

С помощью <Input Name="Show" /> будем определять, надо затемнять или убирать затемнение - менять местами начальное и конечное значение анимации.

Скорректируем Execution на отображение и сворачивание бокового меню:

TemplateMainForm.xml

<Execution>
  <ConditionExpression>
    <Condition Name="MenuPictureBoxClickCondition" />
  </ConditionExpression>
  <Commands>
    <Command Name="MenuPanelVisibleValueSetCommand">True</Command>
    <Command Name="FogPanelСhangeOpacityAnimatedValueSetCommand">
      <Input Name="Show">True</Input>
    </Command>
    <Command Name="ShowMenuPanelAnimatedValueSetCommand" />
  </Commands>
</Execution>

<Execution>
  <ConditionExpression>
    <Condition Name="InnerMenuPanelSwipeRightCondition" />
  </ConditionExpression>
  <Commands>
    <Command Name="FogPanelСhangeOpacityAnimatedValueSetCommand">
      <Input Name="Show">False</Input>
    </Command>
    <Command Name="HideMenuPanelAnimatedValueSetCommand" />
  </Commands>
</Execution>

TemplateMainForm.xml

<Execution>
  <ConditionExpression>
    <!--<Or>-->
    <Condition Name="MenuPictureBoxClickCondition" />
    <!--<Condition Name="OrderCollectionPanelSwipeLeftCondition" />-->
    <!--</Or>-->
  </ConditionExpression>
  <Commands>
    <Command Name="MenuPanelVisibleValueSetCommand">True</Command>
    <Command Name="FogPanelСhangeOpacityAnimatedValueSetCommand">
      <Input Name="Show">True</Input>
    </Command>
    <Command Name="ShowMenuPanelAnimatedValueSetCommand" />
  </Commands>
</Execution>

<Execution>
  <ConditionExpression>
    <!--<Or>-->
    <!--<Condition Name="MenuFogPanelClickCondition" />-->
    <Condition Name="InnerMenuPanelSwipeRightCondition" />
    <!--</Or>-->
  </ConditionExpression>
  <Commands>
    <Command Name="FogPanelСhangeOpacityAnimatedValueSetCommand">
      <Input Name="Show">False</Input>
    </Command>
    <Command Name="HideMenuPanelAnimatedValueSetCommand" />
  </Commands>
</Execution>

Итоги

На уроке мы рассмотрели процесс аутентификации пользователя, .

Ответы

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

Архив не содержит xml-файлы форм десктопного приложения.