Overview of basic controls for Metro style app development Quick Start

Recently, I have been studying the use of controls in the Metro style app. I will briefly introduce them below.How to use some basic controls of the metro style app. I will introduce others laterControls.

For the running environment, see file access operation example of Metro style app. Of courseIt is better to operate the control by yourself.

1. progressring Control

 <ProgressRing HorizontalAlignment="Left" Height="20" Margin="38,43,0,0" IsActive="{Binding IsChecked,ElementName=IsActiveCBX}" VerticalAlignment="Top" Width="55"/> <CheckBox x:Name="IsActiveCBX" IsChecked="True" Content="CheckBox" HorizontalAlignment="Left" Height="22" Margin="63,103,0,0" VerticalAlignment="Top" Width="17" RenderTransformOrigin="1.05900001525879,1.1599999666214"/>

:

 

2. progress bar

 <ProgressBar HorizontalAlignment="Left" Maximum="100" IsIndeterminate="{Binding IsChecked,ElementName=CB1}"                      ShowPaused="{Binding IsChecked,ElementName=CB2}" ShowError="{Binding IsChecked,ElementName=CB3}"                     Value="{Binding Text,ElementName=Value, Converter={StaticResource StringToDoubleConverter}}"  Margin="169,43,0,0" VerticalAlignment="Top" Width="100"/><TextBox x:Name="Value" Width="80" Height="30" Margin="169,71,1117,665"/><CheckBox x:Name="CB1" Content="IsIndeterminate" HorizontalAlignment="Left" Margin="169,108,0,0" VerticalAlignment="Top"/><CheckBox x:Name="CB2" Content="ShowPaused" HorizontalAlignment="Left" Height="19" Margin="169,158,0,0" VerticalAlignment="Top" Width="155"/><CheckBox x:Name="CB3" Content="SHowError" HorizontalAlignment="Left" Height="14" Margin="169,208,0,0" VerticalAlignment="Top" Width="119"/>

 

3. The toggleswitch control, oncontent, and offcontent can also be in the form of binding. The toggleswitch control is like a switch.

 <ToggleSwitch Header="Head Content" OnContent="On Content" OffContent="Off Content" HorizontalAlignment="Left" Height="54" Margin="324,49,0,0" VerticalAlignment="Top" Width="98"/>

4. checkbox control. When ishittestvisible is clicked, the checkbox is invalid. Istabstop attribute: When you press tabl, it jumps directly to the next one.

 <CheckBox x:Name="IsChecked" IsHitTestVisible="False" IsTabStop="False"  Content="IsChecked " Margin="10,0,0,0" VerticalAlignment="Center"                    IsChecked="{Binding IsChecked, ElementName=CheckBox1}"/>

5. ComboBox control.

<ComboBox HorizontalAlignment="Left" Margin="324,126,0,0" VerticalAlignment="Top" Width="120" SelectionChanged="ComboBox_SelectionChanged" SelectedIndex="0">            <TextBlock>Item1</TextBlock>            <TextBlock>Item2</TextBlock>            <TextBlock>Item3</TextBlock>            <TextBlock>Item4</TextBlock></ComboBox>

Obtain the value of the selected item.

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e){      string selectItem = ((TextBlock)e.AddedItems[0]).Text; }

 

6. Image control.

Tooltipservice. tooltip = "Oregon coast", tooltipservice. Placement = "right" indicate the text and text position displayed when the mouse moves to the image.

 <Image x:Name="Image1" Source="images/image1.jpg" Width="200" Height="100" Stretch="UniformToFill" Margin="5" ToolTipService.ToolTip="Oregon Coast" ToolTipService.Placement="Right"/>

 

7. Popup control.

When you click a button, the popub control is displayed. When you click a button again, the popup control is hidden.

        Popup popup = new Popup();        bool bShowPopup = false;        private void PopupButton_Click(object sender, RoutedEventArgs e)        {            bShowPopup = !bShowPopup;            if (bShowPopup)            {                PopupButton.Content = "Hide Popub";                popup.Child = new PopuPanelControl();                popup.VerticalOffset = 500;                popup.HorizontalOffset = 100;                popup.IsOpen = true;            }            else            {                PopupButton.Content = "Show Popup";                popup.IsOpen = false;            }        }

The following is a custom popup control. Of course, it can be defined according to your preferences.

<UserControl    x:Class="BasicHandle.BasicControl.PopuPanelControl"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:BasicHandle.BasicControl"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">    <Border BorderBrush="#19000000" BorderThickness="1" Background="White">        <Grid>            <TextBlock HorizontalAlignment="Left" Foreground="Black" Margin="35,69,0,0" TextWrapping="Wrap" Text="This is Popup Panel Control" VerticalAlignment="Top" Height="97" Width="181"/>        </Grid>    </Border></UserControl>

 

7. Customize the button control.

Visualstatemanager. visualstategroups is used to manage the display effect of the control dashboard.

<Style x:Key="CustomButtonStyle" TargetType="Button">            <Setter Property="Background" Value="Orange"/>            <Setter Property="Foreground" Value="Black"/>            <Setter Property="FontFamily" Value="Comic Sans MS"/>            <Setter Property="FontSize" Value="30"/>            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="Button">                        <Grid>                            <VisualStateManager.VisualStateGroups>                                <VisualStateGroup x:Name="CommonStates">                                    <VisualState x:Name="Normal"/>                                    <VisualState x:Name="PointerOver">                                        <Storyboard>                                            <ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />                                        </Storyboard>                                    </VisualState>                                    <VisualState x:Name="Pressed">                                        <Storyboard>                                            <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />                                            <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />                                        </Storyboard>                                    </VisualState>                                </VisualStateGroup>                            </VisualStateManager.VisualStateGroups>                            <Grid>                                <Rectangle x:Name="Border" Stroke="Black" Fill="Orange" Margin="-5"/>                                <ContentPresenter x:Name="Content"/>                            </Grid>                        </Grid>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>

For example, red is displayed when the mouse moves to the control.

Note that the metro style app uses VisualState. The previous trigger is no longer available. Of course, here I will only introduce some simple usage of the metro style app control. Visual manager of the metro style app is not described here.

Summary:The basic controls of the metro style app are basically the same as before. The trigger for a big change is gone, instead of visual state.

The above is just a bit of learning experience. If you have any comments or suggestions, please submit them!Of course, I am still studyingHope to learn from and make progress together!