WinStore控件之Button、HyperlinkButton、RadioButton、CheckBox、progressBar、ScrollViewer、Slider

 

一、Button

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            /*
             * Button - 按鈕控件，其所有功能是經過其基類 ButtonBase 提供的
             *     ClickMode - 引起 Click 事件的模式：ClickMode.Release（默認值）, ClickMode.Press, ClickMode.Hover
             *     IsPointerOver - 設備指針（鼠標或手指等）是否在按鈕上
             *     IsPressed - 當前按鈕是否處於按下的狀態
             *     Command 和 CommandParameter 等寫到 MVVM 的時候再詳細寫
             */

            Button btn = new Button();
            btn.Content = "我是按鈕";
            btn.ClickMode = ClickMode.Hover;
            btn.Click += btn_Click;
            root.Children.Add(btn);
        }

async void btn_Click(object sender, RoutedEventArgs e)
        {
            await new MessageDialog("觸發了按鈕的 Click 事件").ShowAsync();
        }

Button

二、HyperlinkButton

 

<Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">            
            <!--
                HyperlinkButton - 帶超連接的按鈕
                    NavigateUri - 按鈕要導航到的 Uri
            -->
            <HyperlinkButton Name="btnLink" Content="webabcd blog" FontSize="36" Foreground="Blue" NavigateUri="http://webabcd.cnblogs.com" />
            
        </StackPanel>
    </Grid>

三、RadioButton

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
                <TextBlock FontSize="34" Height="57" Name="textBlock1" Text="你喜歡哪個品牌的手機?" />
                <RadioButton GroupName="MCSites" Background="Yellow" Foreground="Blue" Content="A、諾基亞"  Click="RadioButton_Click" Name="a"/>
                <RadioButton GroupName="MCSites" Background="Yellow" Foreground="Orange" Content="B、蘋果"  Click="RadioButton_Click" Name="b" />
                <RadioButton GroupName="MCSites" Background="Yellow" Foreground="Green" Content="C、HTC"  Click="RadioButton_Click" Name="c"/>
                <RadioButton GroupName="MCSites" Background="Yellow" Foreground="Purple" Content="D、其餘的"  Click="RadioButton_Click" Name="d"/>
                <TextBlock FontSize="34" Height="57" Name="textBlock2" Text="你選擇的答案是：" />
                <TextBlock FontSize="34" Height="57" Name="answer" />
            </StackPanel>
        </Grid>

RadioButton

 private void RadioButton_Click(object sender, RoutedEventArgs e)
        {
            if (a.IsChecked == true)
                answer.Text = a.Content.ToString();
            else if (b.IsChecked == true)
                answer.Text = b.Content.ToString();
            else if (c.IsChecked == true)
                answer.Text = c.Content.ToString();
            else
                answer.Text = d.Content.ToString();
        }

四、CheckBox

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
                <CheckBox x:Name="McCheckBox1" Foreground="Orange" Content="Check Me" FontFamily="Georgia" FontSize="20" FontWeight="Bold" />
                <CheckBox x:Name="McCheckBox3" Content="Check Me" IsChecked="True" Checked="McCheckBox_Checked" Unchecked="McCheckBox_Unchecked" />
            </StackPanel>
        </Grid>

五、progressBar

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
                <TextBlock Text="選擇ProgressBar的類型:" FontSize="20" />
                <RadioButton Content="Determinate類型" Height="71" Name="radioButton1" GroupName="Type"/>
                <RadioButton Content="Indeterminate類型" Height="71" Name="radioButton2" GroupName="Type" IsChecked="True" />
                <Button Content="啓動ProgressBar" Height="72" x:Name="begin"  Click="begin_Click" />
                <Button Content="取消ProgressBar" Height="72" x:Name="cancel"  Click="cancel_Click" />
                <ProgressBar x:Name="progressBar1" IsIndeterminate="true"  />
            </StackPanel>
        </Grid>

 public MainPage()
        {
            this.InitializeComponent();
            progressBar1.Visibility = Visibility.Collapsed;
        }

        private void begin_Click(object sender, RoutedEventArgs e)
        {
            progressBar1.Visibility = Visibility.Visible;

            if (radioButton1.IsChecked == true)
            {
                progressBar1.IsIndeterminate = false;
                DispatcherTimer timer = new DispatcherTimer();
                timer.Interval = TimeSpan.FromSeconds(1);
                timer.Tick += timer_Tick;
                timer.Start();
            }
            else
            {
                progressBar1.Value = 0;
                progressBar1.IsIndeterminate = true;

            }
        }
        async void timer_Tick(object sender, object e)
        {
            if (progressBar1.Value<100)
            {
                progressBar1.Value += 10;
            }
            else
            {
                (sender as DispatcherTimer).Tick -= timer_Tick;
                (sender as DispatcherTimer).Stop();
                await new MessageDialog("進度完成").ShowAsync();
            }
            
        }
        private void cancel_Click(object sender, RoutedEventArgs e)
        {
            progressBar1.Visibility = Visibility.Collapsed;
        }

progressBar

六、ScrollViewer

       <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ScrollViewer Height="200" Width="200" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                <ScrollViewer.Content>
                    <StackPanel>
                        <Image Source="/cat.jpg"></Image>
                    </StackPanel>
                </ScrollViewer.Content>
            </ScrollViewer>
        </Grid>
    </Grid>

     <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,35,0,28">
            <TextBlock Text="個人應用程序" FontSize="20"  />
            <TextBlock Text="滾動的圖片" FontSize="60" />
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">    
            <StackPanel>
                <ScrollViewer Name="scrollViewer1"  VerticalScrollBarVisibility="Hidden" Height="300">
                    <StackPanel Name="stkpnlImage" />
                </ScrollViewer>
                <Button Content="往上" FontSize="30" Click="btnUp_Click" />
                <Button Content="往下" FontSize="30" Click="btnDown_Click"  />
                <Button Content="中止" FontSize="30" Click="stop_Click" Height="17" />
            </StackPanel>
        </Grid>

滾動的圖片

  private DispatcherTimer tmrDown;
        private DispatcherTimer tmrUp;
        public MainPage()
        {
            InitializeComponent();
            for (int i = 0; i <= 30; i++)
            {
                Image imgItem = new Image();
                imgItem.Width = 200;
                imgItem.Height = 200;
                if (i % 4 == 0)
                {
                    imgItem.Source = (new BitmapImage(new Uri("ms-appx:///a.jpg", UriKind.RelativeOrAbsolute)));
                }
                else if (i % 4 == 1)
                {
                    imgItem.Source = (new BitmapImage(new Uri("ms-appx:///b.jpg", UriKind.RelativeOrAbsolute)));

                }
                else if (i % 4 == 2)
                {
                    imgItem.Source = (new BitmapImage(new Uri("ms-appx:///c.jpg", UriKind.RelativeOrAbsolute)));

                }
                else
                {
                    imgItem.Source = (new BitmapImage(new Uri("ms-appx:///d.jpg", UriKind.RelativeOrAbsolute)));

                }
                this.stkpnlImage.Children.Add(imgItem);
            }

            tmrDown = new DispatcherTimer();
            tmrDown.Interval = new TimeSpan(500);
            tmrDown.Tick += tmrDown_Tick;
            tmrUp = new DispatcherTimer();
            tmrUp.Interval = new TimeSpan(500);
            tmrUp.Tick += tmrUp_Tick;
        }

        void tmrUp_Tick(object sender, object e)
        {
            //scrollViewer1.ScrollToVerticalOffset(scrollViewer1.VerticalOffset - 10);
            scrollViewer1.ChangeView(null, scrollViewer1.VerticalOffset - 10, null);
        }

        void tmrDown_Tick(object sender, object e)
        {
            tmrUp.Stop();
           // scrollViewer1.ScrollToVerticalOffset(scrollViewer1.VerticalOffset + 10);
            scrollViewer1.ChangeView(null, scrollViewer1.VerticalOffset + 10, null);
        }

        private void btnUp_Click(object sender, RoutedEventArgs e)
        {
            tmrDown.Stop();
            tmrUp.Start();
        }

        private void btnDown_Click(object sender, RoutedEventArgs e)
        {
            tmrDown.Start();
        }

        private void stop_Click(object sender, RoutedEventArgs e)
        {
            tmrUp.Stop();
            tmrDown.Stop();
        }

View Code

七、Slider

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
                <Grid Name="controlGrid" Grid.Row="0" Grid.Column="0">
                    <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Grid.Row="0" Text="紅色" Foreground="Red" FontSize="20" />
                    <Slider x:Name="redSlider" Grid.Column="0" Grid.Row="1" Foreground="Red" Minimum="0" Maximum="255" ValueChanged="OnSliderValueChanged" />
                    <TextBlock x:Name="redText" Grid.Column="0" Grid.Row="2" Text="0" Foreground="Red" FontSize="20"/>
                    <TextBlock Grid.Column="1" Grid.Row="0" Text="綠色" Foreground="Green" FontSize="20"    />
                    <Slider x:Name="greenSlider" Grid.Column="1" Grid.Row="1" Foreground="Green" Minimum="0" Maximum="255" ValueChanged="OnSliderValueChanged" />
                    <TextBlock x:Name="greenText" Grid.Column="1" Grid.Row="2" Text="0" Foreground="Green" FontSize="20" />
                    <TextBlock Grid.Column="2" Grid.Row="0" Text="藍色" Foreground="Blue" FontSize="20"/>
                    <Slider x:Name="blueSlider" Grid.Column="2" Grid.Row="1" Foreground="Blue" Minimum="0" Maximum="255" ValueChanged="OnSliderValueChanged" />
                    <TextBlock x:Name="blueText" Grid.Column="2" Grid.Row="2" Text="0" Foreground="Blue" FontSize="20" />
                </Grid>
                <Ellipse Height="100" x:Name="ellipse1" Stroke="Black" StrokeThickness="1" Width="224" />
                <TextBlock x:Name="textBlock1" Text="顏色" FontSize="26"/>         
            </StackPanel>
        </Grid>

Slider

 public MainPage()
        {
            InitializeComponent();
            redSlider.Value = 128;
            greenSlider.Value = 128;
            blueSlider.Value = 128;
        }

        void OnSliderValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {

            Color clr = Color.FromArgb(255, (byte)redSlider.Value,
                                            (byte)greenSlider.Value,
                                            (byte)blueSlider.Value);
            ellipse1.Fill = new SolidColorBrush(clr);
            textBlock1.Text = clr.ToString();
            redText.Text = clr.R.ToString("X2");
            greenText.Text = clr.G.ToString("X2");
            blueText.Text = clr.B.ToString("X2");
           
        }