[Wanli journey-Windows App development] control collection 2 [under repair], journey app

[Wanli journey-Windows App development] control collection 2 [under repair], journey app

Next, let's take a look at some of the controls that have not been discussed before, but there are so many controls that they cannot be listed in all.

Button

The most common control above is the Button, which has an interesting property. When you place the mouse pointer on the Button, a string of text will pop up on the top of the Button. This is not a problem ......

<Button ToolTipService.ToolTip="Go to www.blog.csdn.net/nomasp" Margin="692,458,0,230"  />

ToggleSwitch

Another control is very similar to a Button. It is like a switch.

<ToggleSwitch x:Name="toggleSwitch1" Header="NoMasp Toggle"       OnContent="On" OffContent="Off" Toggled="ToggleSwitch_Toggled"       Margin="409,468,0,227"/><ToggleSwitch x:Name="toggleSwitch2" Header="NoMasp Toggle"      OnContent="On" OffContent="Off" IsOn="True"      Toggled="ToggleSwitch_Toggled" Margin="409,565,0,130"/>

ComboBox

ComboBox provides a drop-down list, which is naturally a common control.

<ComboBox Height="50" Width="200" Name="cbox1"  SelectionChanged="cbox1_SelectionChanged" Margin="17,47,1049,671">     <x:String>Select 1</x:String>     <x:String>Select 2</x:String>     <x:String>Select 3</x:String>     <x:String>Select 4</x:String></ComboBox>

ListBox

The ListBox control is similar to the ComboBox control, allowing users to select the options that have been embedded in the list. The usage is as follows:

<ListBox x:Name="listBox1" SelectionChanged="listBox1_SelectionChanged" Width="100">    <x:String>Item 1</x:String>    <x:String>Item 2</x:String>    <x:String>Item 3</x:String></ListBox>

DatePicker and TimePicker

The time control set on Win platform is quite distinctive, DatePicker and TimePicker.

<DatePicker Foreground="Red" Header="NoMasp Date" Margin="3,177,0,533"/><TimePicker Foreground="Green" Header="NoMasp Time" Margin="3,246,0,464" Width="289"/>

The following is both the time for writing this blog.

FlipView

FlipView is a control that allows users to browse project sets one by one. The following is the relevant sample code. The CommonAssets folder can be defined in the Shared directory, so that WP can be used. I have never taken the WP picture because I have not installed a virtual machine, and I am using a real machine for debugging.

<FlipView>    <Image Source="CommonAssets/5083.jpg"/>    <Image Source="CommonAssets/5503.jpg"/>    <Image Source="CommonAssets/6121.jpg"/></FlipView>

ScrollBar

If you want to scale an image and you can scroll to view the image, you can use ScrollBar. This is mainly because the image location is too small to be displayed.

<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="12" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" VerticalScrollMode="Enabled" Height="200" Width="200" Margin="363,35,803,533">    <Image Source="CommonAssets/6121.jpg" Height="400" Width="400"/> </ScrollViewer>

Viewbox

There is also a control that scales the image to the specified size, that is, Viewbox. Let's take a look at the figure below. Is it cool.

    <Viewbox MaxHeight="33" MaxWidth="33" Margin="23.5,35,-26,-35">            <Image Source="CommonAssets/5503.jpg" Opacity="0.9 "/>        </Viewbox>        <Viewbox MaxHeight="66" MaxWidth="66" Margin="26,35,-26,-35">            <Image Source="CommonAssets/5503.jpg" Opacity="0.6"/>        </Viewbox>        <Viewbox MaxHeight="99" MaxWidth="99" Margin="26,35,-26,-35">            <Image Source="CommonAssets/5503.jpg" Opacity="0.3"/>        </Viewbox>

GridView

I believe everyone has read the GridView control, and many Modern applications will adopt it. It is similar to ComboBox.

<GridView x:Name="gView1" SelectionChanged="gView1_SelectionChanged">    <x:String>Item 1</x:String>    <x:String>Item 2</x:String>    <x:String>Item 3</x:String></GridView>

HyperlinkButton

HyperlinkButton can be used as a Button or as a hyperlink.

<HyperlinkButton Content="NoMasp--CSDN" NavigateUri="http://blog.csdn.net/nomasp" />

ProgressBar

I believe everyone is fond of playing progress bars? I personally think that the Win8 progress bar is more interesting than Win7 and Vista.

<ProgressBar x:Name="progressBar1" IsIndeterminate="True" Width="100" Margin="607,377,659,385"/><ProgressBar x:Name="progressBar2" Value="70 " Width="100" Margin="607,352,659,410"/>

The first figure shows the progress bar in the running state. The second figure shows the progress bar 1 with the Value of 70, which is progressBar2, is the static status of the running progress bar in the designer.

ProgressRing

Will the ring progress bar be more fun?

<ProgressRing x:Name="progressRing1" IsActive="True" />

Slider

For example, the volume and screen brightness of win8 are all slide bars. Let's take a look at its ThumbToolTipValueConverter attributes. To bind a value to a Slider, we need a class that provides an interface for value conversion for data binding. The visualization element, that is, Slider, is the binding target. It has two directions: Data Source> DATA> binding target, binding target> DATA> data source.

We need to write a class that can be directly stored in MainPage. xaml. but it is better to create a new class separately. Considering that this is a common application, it is more appropriate to create a class under Shared.

public class ThumbToolTipValueConverter : Windows.UI.Xaml.Data.IValueConverter{    public object Convert(object value, Type targetType, object parameter, string language)    {        if(value is double)        {                double dValue= System.Convert.ToDouble(value);                return dValue;                        }        return null;     }    public object ConvertBack(object value, Type targetType, object parameter, string language)    {        return null;    }}

Then add the following code as the locally instantiated resource.

<Page.Resources>   <local:ThumbToolTipValueConverter x:Key="thumbToolTipValueC"/></Page.Resources>

Finally, it is the legendary ontology.

<Slider Width="200" Height="50" Name="slider1"          ThumbToolTipValueConverter="{StaticResource thumbToolTipValueC}" />

We can also add a Button and TextBlock to show the Slider Value on the TextBlock by clicking.

private void btnGetSliderValue_Click(object sender, RoutedEventArgs e){    tblockSlider.Text = slider1.Value.ToString();}

In the subsequent blog, we will also learn how to use Slider to control image scaling ..