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;
        }