[Wanli journey-Windows App development] Big collection of controls [under repair], journey app

[Wanli journey-Windows App development] Big collection of controls [under repair], journey app

Use design tools such as Blend for Visual Studio or Microsoft Visual Studio XAML designer.
Add the control to the XAML tag in the Visual Studio XAML editor.
Add controls to the code. When the application runs, the control you added in the Code is displayed, but not in the Visual Studio XAML designer.

We have used Grid, Button, and other controls before. Now let's take a systematic look at some properties and events of the controls.

There is no doubt that the first step is to add controls. Which of the following methods can be used to add controls. Previously, all the controls written directly in XAML or dragged from the toolbox. In fact, there are two other types, one of which is complicated but will be used in the future, that is, adding controls to the C # background code; you can also drag the control in Blend for Visual Studio. The latter is also very powerful. For example, if you want to use an animation, this designer can play a role.

The attributes of the control are used by everyone. You can add attributes directly to the XAML, and add and modify attributes in the attribute view.

If you want to add and modify events, click the lightning icon in the upper right corner of the attribute view. If you want to add a Click event, Enter the event name in the Click input box and press Enter. In this case, VS will automatically jump to the C # background code. The first parameter sender is the application of the Object appended to the processing program, and the second parameter is the event data, it is usually displayed as the e parameter in the signature.

private void btnSetStyle_Click(object sender, RoutedEventArgs e){    Button b = (Button)sender;    b.Height = 400;    b.Width = 320;}

The above Code sets the height of the clicked Button to 400 and the width to 320. In addition to this method, you can also perform the following operations, where btnSetStyle is the name of the current Button:

private void btnSetStyle_Click(object sender, RoutedEventArgs e){    btnSetStyle.Height = 400;    btnSetStyle.Width = 320;}

In addition, we can also define Click events in XAML, and perform the following operations to achieve the same effect. It will associate two events.

public MainPage(){     this.InitializeComponent();     btnSetStyle.Click += new RoutedEventHandler(btnSetStyle_Click);}private void btnSetStyle_Click(object sender, RoutedEventArgs e){    btnSetStyle.Height = 400;    btnSetStyle.Width = 320;}

We have learned about adding controls, adding/modifying properties, and adding/modifying events. Also, let's take a look at the style of the Control. When talking about the style, we may think of css. I think everyone has played 2048. There are a lot of squares in the game. Will these square styles be defined one by one, of course not, you can use style resources to locate all buttons. We will also discuss how to write a 2048 game later.

The following is the style I wrote in 2048,

<Page.Resources>   <Style TargetType="Button">      <Setter Property="FontWeight" Value="Bold"/>      <Setter Property="FontSize" Value="40"/>      <Setter Property="HorizontalAlignment" Value="Center"></Setter>      <Setter Property="VerticalAlignment" Value="Center"></Setter>      <Setter Property="Background" Value="Gray"></Setter>      <Setter Property="Width" Value="100"></Setter>      <Setter Property="Height" Value="100"></Setter>      <Setter Property="Template">          <Setter.Value>              <ControlTemplate TargetType="Button">                  <Grid x:Name="Grid" Background="Transparent">                      <Border x:Name="Border" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="{TemplateBinding Background}" >                          <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center"  VerticalAlignment="Center"/>                       </Border>                   </Grid>               </ControlTemplate>           </Setter.Value>       </Setter>    </Style></Page.Resources>

But there is also a problem here. If we have 10 Button controls, but only eight of them use these definitions, and the other two want to use another control, what should we do?

Defining a style as a resource actually involves two methods.
One is to use the TargetType attribute of the Style directly to define all target controls.
In addition to the TargetType attribute, you can also use the x: key attribute, and then use the explicit keyword StaticResource in the specific control to set the specific Style attribute.

<Page.Resources>          <Style TargetType="Button">                       <Setter Property="FontStyle" Value="Oblique" />         <Setter Property="FontSize" Value="20" />         <Setter Property="BorderBrush" Value="Green" />         <Setter Property="BorderThickness" Value="5" />         <Setter Property="Foreground" Value="Orange" />         <Setter Property="Height" Value="80"/>         <Setter Property="Width" Value="160"/>     </Style>     <Style x:Key="OtherStyle" TargetType="Button">         <Setter Property="FontStyle" Value="Italic" />         <Setter Property="FontSize" Value="16" />         <Setter Property="Foreground" Value="Lavender" />         <Setter Property="Height" Value="160"/>         <Setter Property="Width" Value="320"/>         <Setter Property="Opacity" Value="0.2"/>     </Style>                                                            </Page.Resources>

For more information about the effect, see Opacity.

We all know that classes can be inherited, and styles can also be inherited.