I need to reduce the header text item1 in pivot page. But, i dunno how to do. Is there anyway to reduce this font size ?
XAML Code;
<phone:PivotItem Header="item1">
<Grid/>
</phone:PivotItem>
You can change HeaderTemplate. Smth like this:
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding}" FontSize="40" />
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
You cannot change the font size in PivotItem. Instead you can create a Template where you can add a TextBlock and consider it as a header. Please find the sample here.
<controls:Pivot Title="whatever" Name="pivot">
<controls:PivotItem Margin="11,28,13,0" >
<controls:PivotItem.Header>
<Grid>
<TextBlock Name="FirstPivot" FontSize="31" Text="FirstPivot" />
</Grid>
</controls:PivotItem.Header>
<Grid> <!-- content --> </Grid>
</controls:Pivot>
On Windows Phone 8 remember to change the 'controls' to 'phone'.
<phone:Pivot Title="whatever" Name="pivot">
<phone:PivotItem Margin="11,28,13,0" >
<phone:PivotItem.Header>
<Grid>
<TextBlock Name="FirstPivot" FontSize="31" Text="FirstPivot" />
</Grid>
</phone:PivotItem.Header>
<Grid> <!-- content --> </Grid>
</phone:Pivot>
Related
I am making a UWP app and trying to place two TextBlock inside a ListBoxItem. HorizontalAlignment property doesn't seem to work.
I am trying to align the first TextBlock to the left and the second TextBlock to the right. Currently I am trying using Grids. Here's my XAML:
<Pivot.ItemTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding List}"
SelectionMode="Multiple"
ScrollViewer.HorizontalScrollMode="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding read}"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Text="{Binding num}"
Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</Pivot.ItemTemplate>
A couple of things you need to do here:
First, you need to stretch the alignment of the ListBoxItem, not the ListBox itself.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Second, you should change Width="1*" to Width="Auto" otherwise the num TextBlock might get truncated. Then you can remove Width="9*" and add TextWrapping="Wrap" to the read TextBlock so if text will go to the next line if it's too long. You can safely remove HorizontalAlignment="Left" too.
Try to set the HorizontalContentAlignment property to stretch in the ListBox:
<ListBox ItemsSource="{Binding List}"
HorizontalContentAlignment="Stretch"
SelectionMode="Multiple"
ScrollViewer.HorizontalScrollMode="Disabled">
By default the HorizontalContentAlignment is set to left, and your listItem will not stretch to use all the available space, and that's why it's content will not be alligned properly to the right.
I started off with a Grouped Items Page template and have my data displaying in groups. I added some margins around these items to improve spacing, but now when I hover over these items, the margin area shows as highlighted. I'm sure this is an easy one for xaml gurus. Please assist!!
Here's my markup:
<GridView.ItemTemplate>
<DataTemplate>
<!-- ******************* here is my margins ******************* -->
<Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20">
<Grid HorizontalAlignment="Left" Width="390" Height="190">
<Grid.Background>
<ImageBrush ImageSource="/Assets/default.png" Stretch="None"/>
</Grid.Background>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/>
<StackPanel MaxWidth="270">
<TextBlock Text="{Binding Summary}"/>
<TextBlock Text="{Binding Brand}" />
<TextBlock Text="{Binding Detail}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
Your ItemTemplate just populates over the existing style template for the GridViewItem Style which if you look in the default template shown in that link you'll see a Rectangle named "PointerOverBorder" which is shown (via the VisualStateManager) in the PointerOver state with its Fill set to ListViewItemPointerOverBackgroundThemeBrush.
You could go into the template (right-click, edit template) and remove it, or add your margins, or make it transparent or a number of options. Or could just overwrite the brush resource on the instance to be transparent or something kind of like;
<blah.Resources>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</blah.Resources>
Hope this helps.
I have adding parallax background to Pivot control. I think need use PanningBackgroundLayer from Panorama.
Any ideas?
Are you strictly required to use a Pivot? Panoramas can be styled to work like Pivots, if you modify your margins accordingly. That way you have the parallax effects of a Panorama in a layout that looks like a Pivot.
<Grid x:Name="LayoutRoot">
<phone:Panorama>
<phone:Panorama.TitleTemplate>
<DataTemplate>
<StackPanel>
<Label Content="MY APPLICATION" Width="180" Margin="10,40,0,0"/>
</StackPanel>
</DataTemplate>
</phone:Panorama.TitleTemplate>
<phone:PanoramaItem x:Name="PanoramaItem_1" Margin="0,0,0,32">
<phone:LongListSelector>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<!--Your Data Here-->
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<phone:PanoramaItem x:Name="PanoramaItem_2" Margin="0,0,0,32">
<phone:LongListSelector>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<!--Your Data Here-->
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
I am working on a phone project which requires a pivot page.
I need to change the foreground and fontsize of PivotItem Headers. nothing changes when I tried to code them in xaml
<phone:PivotItem Header="item1" Foreground="black" fontsize="25" >
do I have to use style for them?
You need to change the HeaderTemplate
For example like this:
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<StackPanel Margin="0">
<TextBlock FontSize="25" Margin="0" Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:PivotItem Header="item1">
</controls:PivotItem>
you can try like this ..
in this i have shown how to make a header of one item you can do this for rest of the others
<phone:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<phone:PivotItem >
<phone:PivotItem.Header>
<StackPanel Background="#132d63" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="hhaha" FontSize="35" Foreground="White" Padding="10,10,10,10" />
</StackPanel>
</phone:PivotItem.Header>
</phone:PivotItem>
</phone:Pivot>
What I need is to set the item frame margin to 10.
The Designer View keep throwing the Exception so I cant proceed.
<phone:Pivot.ItemTemplate>
<DataTemplate>
<phone:PivotItem Margin="10"/>
</DataTemplate>
</phone:Pivot.ItemTemplate>
What's wrong with this code?
Sorry, I didn't realise this was WP8. On WP8, phone is the default namespace for Pivots. That's pretty arbitrary though. Are you sure that the problem isn't elsewhere? It would still be helpful for you to share your XAML, but here is some that works for me:
<phone:Pivot>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<phone:PivotItem Margin="10">
<Grid>
<!--Contents of template-->
</Grid>
</phone:PivotItem>
</DataTemplate>
</phone:Pivot.ItemTemplate>
<phone:PivotItem Header="Hello">
<Grid>
<!--Contents of "Hello" item-->
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="World">
<Grid>
<!--Contents of "World" item-->
</Grid>
</phone:PivotItem>
</phone:Pivot>