По умолчанию Windows Phone 7 SDK не имеет TabControl. Это довольно полезный компонент, уже доступный в Silverlight, и хотя он не совсем соответствует стилю Metro, он может найти применение. Например, некоторые приложения Android имеют похожий пользовательский интерфейс:
Для использования этого элемента управления полная перезапись не требуется. Все, что нужно сделать, это добавить ссылку на System.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:
Я немного поработал с Blend и заставил его выглядеть так же, как и любой другой Metro-совместимый элемент управления. Стиль показан в нижней части этой статьи — его можно включить в раздел «Ресурсы» приложения или страницы, а затем связать с ним как StaticResource. После редизайна я получил такой вид:
Намного лучше! Что мне действительно нравится в Silverlight TabControl, так это то, что я могу расположить заголовки вкладок где угодно, просто изменив свойство TabStripPlacement — это может быть Top (по умолчанию ) , Bottom , Left и Right . Вот как это выглядит с пользовательским размещением:
Содержимое каждого 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>