[英]Pivot item headers like instagram in windows phone 8
I need your ideas how can i put Segoe UI Font or icons to Pivot
Headers. 我需要您的想法,如何将Segoe UI字体或图标放在
Pivot
头中。 I started a new project and put basic Pivot
on my XAML, if you ask more and more code, that's all. 我开始了一个新项目,并将基本的
Pivot
放在我的XAML上,如果您要求越来越多的代码,仅此而已。
This is the app link that i want to know how can they put items as icons rather than texts. 这是我想知道的应用程序链接,他们如何将项目作为图标而不是文本放置。 http://instagram.com/
http://instagram.com/
i need sample code rather than fairy tale or success stories. 我需要示例代码,而不是童话故事或成功故事。
<phone:PivotItem CacheMode="{x:Null}" FontFamily="Segoe UI Symbol" Header="feed" >
As it turns out there is a great article on the Nokia Developer Wiki for doing just that. 事实证明,诺基亚开发者维基上有一篇很棒的文章 。
The gist of it is to not have a Header set for the PivotItem and instead to display a ListBox at the top of the page. 其要旨是没有为PivotItem设置Header,而是在页面顶部显示ListBox。 You then link the ListBox SelectedIndex to the Pivot SelectedIndex.
然后,您将ListBox SelectedIndex链接到Pivot SelectedIndex。
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}">
<!-- Items -->
</ListBox>
<phone:Pivot x:Name="ContentPivot">
<!-- Items -->
</phone:Pivot>
</Grid>
This is the actual answer in MSDN forums. 这是 MSDN论坛中的实际答案 。
..and this is how it looks on the phone's screen. .. 这就是它在手机屏幕上的外观。
Simply use the event handlers. 只需使用事件处理程序。 Tap of Image and SelectionChanged of Pivot.
点击图像和选择更改枢轴。
Here is the xaml I used: 这是我使用的xaml:
<Grid x:Name="LayoutRoot" Background="#2b5a83">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Top" Height="82"
Background="#2b5a83" Canvas.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="icon0" Grid.Column="0"
Source="/Assets/ApplicationIcon.png"
Opacity="0.5" Tap="icon0_Tap"/>
<Image x:Name="icon1" Grid.Column="1"
Source="/Assets/ApplicationIcon.png"
Opacity="0.5" Tap="icon1_Tap" />
</Grid>
<!--Pivot Control-->
<phone:Pivot Grid.Row="1" x:Name="MainPivot"
Foreground="White" Background="#2b5a83"
SelectionChanged="Pivot_SelectionChanged">
<!--Pivot item one-->
<phone:PivotItem>
<TextBlock>
Deneme
</TextBlock>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem>
<TextBlock>
Deneme 2
</TextBlock>
</phone:PivotItem>
</phone:Pivot>
</Grid>
... and the CSharp code-behind as follows: ...以及CSharp的代码如下:
private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
switch (MainPivot.SelectedIndex)
{
case 0:
Select0();
break;
case 1:
Select1();
break;
default:
MessageBox.Show("Add another case and write it's new method, " + Environment.NewLine +
"Also bind the `Tap` event of another image to a new handler calling this newly created method.");
break;
}
}
private void Icon1_Tap(object sender, GestureEventArgs e)
{
Select1();
}
private void Select0()
{
icon0.Opacity = 1.0;
icon1.Opacity = 0.5;
MainPivot.SelectedIndex = 0;
}
private void Select1()
{
icon1.Opacity = 1.0;
icon0.Opacity = 0.5;
MainPivot.SelectedIndex = 1;
}
private void icon0_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
Select0();
}
private void icon1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
Select1();
}
Try it! 试试吧! =) ...and let me know of the outcome:)
=)...让我知道结果:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.