wpf 一個仿iphone滑動開關

今天閑來無事，做個防iphone的滑動開關玩玩，美工底子比較差，不好看大家多多包涵。

效果如圖，主要是一個dayview和monthview切換的按鈕。

剛剛學習wpf 所以做的方法可能比較土。閑話不說上代碼

前台xaml代碼

<Window x:Class="_20111210_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        SizeChanged="Window_SizeChanged" Loaded="Window_Loaded"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="normal"  TargetType="Border">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF9FABD6" Offset="0" />
                        <GradientStop Color="#FF90AAF0" Offset="1" />
                        <GradientStop Color="#CF7B7BB8" Offset="0.411" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="selected" TargetType="Border">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AECA" Offset="0" />
                        <GradientStop Color="#FFC2C2DF" Offset="0.383" />
                        <GradientStop Color="#FF106BFF" Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
        <StackPanel Orientation="Horizontal">
            <Border Style="{StaticResource normal}"  x:Name="DaySwitcher" MouseLeftButtonUp="DaySwitcher_MouseLeftButtonUp">
                <Border.CornerRadius>
                    <CornerRadius TopLeft="5" BottomLeft="5"/>
                </Border.CornerRadius>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FF444242">
                        <Run>Day</Run>
                </TextBlock>               
            </Border>
            <Border Style="{StaticResource selected}" x:Name="MonthSwitcher" MouseLeftButtonUp="MonthSwitcher_MouseLeftButtonUp">
                <Border.CornerRadius>
                    <CornerRadius TopRight="5" BottomRight="5"/>
                </Border.CornerRadius>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Run>Month</Run>
                    </TextBlock>
            </Border>
        </StackPanel>
</Window>

在資源里定義了兩個style 一個叫normal 一個叫selected

然后就是單擊切換事件

后台處理代碼比較簡單

private void DaySwitcher_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Border b = sender as Border;
            b.Style = this.FindResource("selected") as Style;
            MonthSwitcher.Style = this.FindResource("normal") as Style;

        }

        private void MonthSwitcher_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Border b = sender as Border;
            b.Style = this.FindResource("selected") as Style;
            DaySwitcher.Style = this.FindResource("normal") as Style;
        }