在Windows Phone 7上使用TabControl的教程

方石剑
127 阅读2分钟

在Windows Phone 7上使用TabControl

默认情况下，Windows Phone 7 SDK并没有TabControl。这是一个相当有用的组件，在Silverlight中已经有了，虽然它不太遵循Metro风格，但也有它的用处。例如，一些Android应用程序有一个类似的用户界面。

添加相关功能

记住，有时需要在手机上添加相关的功能，以使它像我们希望的那样全面运作，这一点非常重要。可悲的是，有一些人没有意识到他们需要投入这样的时间和精力，他们最终可能会使用一个不具备所有功能的手机，而这是他们应得的。

那些发现自己处于这种情况的人需要知道他们可以做什么来增加回他们已经失去的一些功能。最好的办法是在可能的情况下，将诸如 TabControl和其他代码的功能放入一个人的手机，使其以所有可能的最佳方式工作。那些这样做的人是在给自己一个台阶，如果他们不花时间从一开始就加入这些相关的、很酷的功能，他们可能就不会有这样的机会了。

为了使用这个控件，完全重写是没有必要的。所有需要做的就是添加一个对System.Development的引用。Windows.Controls - 这是一个标准的Silverlight库，位于：

C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client

如果开发环境是在32位系统上设置的，那么位置中的x86部分应该被排除。

下一步是在工作XAML中添加汇编参考作为 命名空间指针。

xmlns:cc="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

要把控件添加到工作区：

<cc:TabControl>
    <cc:TabItem Height="80" Width="80" Header="Tab 1" Foreground="Black"></cc:TabItem>
    <cc:TabItem Height="80" Width="80" Header="Tab 2" Foreground="Black"></cc:TabItem>
    <cc:TabItem Height="80" Width="80" Header="Tab 3" Foreground="Black"></cc:TabItem>
    <cc:TabItem Height="80" Width="80" Header="Tab 4" Foreground="Black"></cc:TabItem>
    <cc:TabItem Height="80" Width="80" Header="Tab 5" Foreground="Black"></cc:TabItem>
</cc:TabControl>

在这一点上，我得到的并不是我想在我的Windows Phone上看到的那种UI风格。

我用Blend做了一点工作，让它看起来就像其他 兼容Metro的控件。样式显示在本文的底部--它可以被包含在应用程序或页面的资源部分，然后作为StaticResource绑定。重新设计后，我得到了这个外观。

好多了!我真正喜欢 Silverlight TabControl的地方是，我可以通过简单地改变TabStripPlacement属性，把标签头放在任何我想要的地方--它可以是顶部（默认）、底部、左侧和右侧。下面是自定义位置时的样子。

每个TabItem的内容都应该放在Canvas里面：

<cc:TabItem Style="{StaticResource TabItemStyle1}" Height="80" Width="80" Header="Tab 1" Foreground="Black">
    <Canvas>
        <StackPanel>
            <Button Height="100" Width="100" Content="Test"></Button>
            <TextBlock Text="This is a test"></TextBlock>
        </StackPanel>
    </Canvas>
</cc:TabItem>

在一个简短的DataTemplate的帮助下，我可以将HeaderTemplate设置为与文本一起显示一个图标。

<DataTemplate x:Key="Header">
    <StackPanel>
        <Image Height="32" Width="32" Source="/AppIcon2.png"></Image>
        <TextBlock>Sample</TextBlock>
    </StackPanel>
</DataTemplate>

这里是基本的Metro风格，应该应用于TabControl，使其更像WP7。

<Style x:Key="TabItemStyle1" TargetType="cc:TabItem">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="BorderBrush" Value="#FFA3AEB9"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="6,2,6,2"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="MinWidth" Value="5"/>
    <Setter Property="MinHeight" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="cc:TabItem">
                <Grid x:Name="Root">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0"/>
                                <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualTop">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualBottom">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualLeft">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualRight">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualTopSelected">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualTopUnSelected">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualBottomSelected">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualBottomUnSelected">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualLeftSelected">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualLeftUnSelected">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualRightSelected">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualRightUnSelected">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualTop">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualBottom">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualLeft">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualRight">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="TemplateTopSelected" Visibility="Collapsed" Canvas.ZIndex="1">
                        <Border BorderBrush="White" BorderThickness="1,1,1,0" Background="White" CornerRadius="3,3,0,0" Margin="-2,-2,-2,0">
                            <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                        <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                        <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Rectangle Fill="Black" Margin="0,0,0,-2"/>
                                    <ContentControl x:Name="HeaderTopSelected" Cursor="{TemplateBinding Cursor}" Foreground="White" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                </Grid>
                            </Border>
                        </Border>
                        <Border x:Name="FocusVisualTop" BorderBrush="White" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0" IsHitTestVisible="false" Margin="-2,-2,-2,0" Visibility="Collapsed"/>
                        <Border x:Name="DisabledVisualTopSelected" Background="#8CFFFFFF" CornerRadius="3,3,0,0" IsHitTestVisible="false" Margin="-2,-2,-2,0" Opacity="0"/>
                    </Grid>
                    <Grid x:Name="TemplateTopUnselected" Visibility="Collapsed">
                        <Border x:Name="BorderTop" BorderBrush="White" BorderThickness="1" Background="White" CornerRadius="3,3,0,0">
                            <Border x:Name="GradientTop" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0" Background="#FF272727">
                                <Grid>
                                    <ContentControl x:Name="HeaderTopUnselected" Cursor="{TemplateBinding Cursor}" Foreground="White" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                </Grid>
                            </Border>
                        </Border>
                        <Border x:Name="DisabledVisualTopUnSelected" Background="#8CFFFFFF" CornerRadius="3,3,0,0" IsHitTestVisible="false" Opacity="0"/>
                    </Grid>
                    <Grid x:Name="TemplateBottomSelected" Visibility="Collapsed" Canvas.ZIndex="1">
                        <Border BorderBrush="White" BorderThickness="1,0,1,1" Background="White" CornerRadius="0,0,3,3" Margin="-2,0,-2,-2">
                            <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,0,1,1">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                        <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                        <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Rectangle Fill="Black" Margin="0,-2,0,0"/>
                                    <ContentControl x:Name="HeaderBottomSelected" Cursor="{TemplateBinding Cursor}" Foreground="White" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="Black"/>
                                </Grid>
                            </Border>
                        </Border>
                        <Border x:Name="FocusVisualBottom" BorderBrush="White" BorderThickness="1,0,1,1" CornerRadius="0,0,3,3" IsHitTestVisible="false" Margin="-2,0,-2,-2" Visibility="Collapsed"/>
                        <Border x:Name="DisabledVisualBottomSelected" Background="#8CFFFFFF" CornerRadius="0,0,3,3" IsHitTestVisible="false" Margin="-2,0,-2,-2" Opacity="0"/>
                    </Grid>
                    <Grid x:Name="TemplateBottomUnselected" Visibility="Collapsed">
                        <Border x:Name="BorderBottom" BorderBrush="White" BorderThickness="1" Background="White" CornerRadius="0,0,3,3">
                            <Border x:Name="GradientBottom" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,0,1,1" Background="#FF272727">
                                <Grid>
                                    <ContentControl x:Name="HeaderBottomUnselected" Cursor="{TemplateBinding Cursor}" Foreground="White" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                </Grid>
                            </Border>
                        </Border>
                        <Border x:Name="DisabledVisualBottomUnSelected" Background="#8CFFFFFF" CornerRadius="0,0,3,3" IsHitTestVisible="false" Opacity="0"/>
                    </Grid>
                    <Grid x:Name="TemplateLeftSelected" Visibility="Collapsed" Canvas.ZIndex="1">
                        <Border BorderBrush="White" BorderThickness="1,1,0,1" Background="White" CornerRadius="3,0,0,3" Margin="-2,-2,0,-2">
                            <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,0,0,1">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                        <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                        <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Rectangle Fill="Black" Margin="0,0,-2,0"/>
                                    <ContentControl x:Name="HeaderLeftSelected" Cursor="{TemplateBinding Cursor}" Foreground="White" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                </Grid>
                            </Border>
                        </Border>
                        <Border x:Name="FocusVisualLeft" BorderBrush="White" BorderThickness="1,1,0,1" CornerRadius="3,0,0,3" IsHitTestVisible="false" Margin="-2,-2,0,-2" Visibility="Collapsed"/>
                        <Border x:Name="DisabledVisualLeftSelected" Background="#8CFFFFFF" CornerRadius="3,0,0,3" IsHitTestVisible="false" Margin="-2,-2,0,-2" Opacity="0"/>
                    </Grid>
                    <Grid x:Name="TemplateLeftUnselected" Visibility="Collapsed">
                        <Border x:Name="BorderLeft" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3,0,0,3">
                            <Border x:Name="GradientLeft" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,0,0,1" Background="#FF272727">
                                <Grid>
                                    <ContentControl x:Name="HeaderLeftUnselected" Cursor="{TemplateBinding Cursor}" Foreground="White" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                </Grid>
                            </Border>
                        </Border>
                        <Border x:Name="DisabledVisualLeftUnSelected" Background="#8CFFFFFF" CornerRadius="3,0,0,3" IsHitTestVisible="false" Opacity="0"/>
                    </Grid>
                    <Grid x:Name="TemplateRightSelected" Visibility="Collapsed" Canvas.ZIndex="1">
                        <Border BorderBrush="White" BorderThickness="0,1,1,1" Background="White" CornerRadius="0,3,3,0" Margin="0,-2,-2,-2">
                            <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,1,1,0">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                        <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                        <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Rectangle Fill="Black" Margin="-2,0,0,0"/>
                                    <ContentControl x:Name="HeaderRightSelected" Cursor="{TemplateBinding Cursor}" Foreground="White" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                </Grid>
                            </Border>
                        </Border>
                        <Border x:Name="FocusVisualRight" BorderBrush="White" BorderThickness="0,1,1,1" CornerRadius="0,3,3,0" IsHitTestVisible="false" Margin="0,-2,-2,-2" Visibility="Collapsed"/>
                        <Border x:Name="DisabledVisualRightSelected" Background="#8CFFFFFF" CornerRadius="0,3,3,0" IsHitTestVisible="false" Margin="0,-2,-2,-2" Opacity="0"/>
                    </Grid>
                    <Grid x:Name="TemplateRightUnselected" Visibility="Collapsed">
                        <Border x:Name="BorderRight" BorderBrush="White" BorderThickness="1" Background="White" CornerRadius="0,3,3,0">
                            <Border x:Name="GradientRight" BorderThickness="1" CornerRadius="0,1,1,0" Background="#FF272727">
                                <Grid>
                                    <ContentControl x:Name="HeaderRightUnselected" Cursor="{TemplateBinding Cursor}" Foreground="White" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                </Grid>
                            </Border>
                        </Border>
                        <Border x:Name="DisabledVisualRightUnSelected" Background="#8CFFFFFF" CornerRadius="0,3,3,0" IsHitTestVisible="false" Opacity="0"/>
                    </Grid>
                    <Border x:Name="FocusVisualElement" BorderBrush="White" BorderThickness="1" CornerRadius="3,3,0,0" IsHitTestVisible="false" Margin="-1" Visibility="Collapsed"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
avatar
文章
阅读
粉丝