How can i set two diferent Background for the Pivot Items, for example blue for "All" and red for "NotAll".
<Pivot x:Name="Pivot" HorizontalContentAlignment="Center"">
<PivotItem Header="All" x:Name="All">
<ListView
ItemsSource="{Binding Source={StaticResource AllList}}"
SelectionMode="None">
</ListView>
</PivotItem>
<PivotItem x:Name="NotAll" Header="Not All">
<ListView
ItemsSource="{Binding Source={StaticResource NotAllList}}"
SelectionMode="None">
</ListView>
</PivotItem>
</Pivot>
If you just want to set background color of the whole pivot item, you can set its Background property:
<Pivot x:Name="Pivot" HorizontalContentAlignment="Center">
<PivotItem Background="Blue" ...>
...
</PivotItem>
<PivotItem Background="Red" ...>
...
</PivotItem>
</Pivot>
Alternatively, if you want to change the color of the header texts, you can use complex property syntax and just set the headers to a custom control:
<PivotItem x:Name="NotAll">
<PivotItem.Header>
<TextBlock Foreground="Red" Text="Not all" />
</PivotItem.Header>
...
</PivotItem>
Related
In the example below, the ListView control understands the width of it's parent container RelativePanel. When looking a the layout in the designer, it is clear that the ListView is filling out to the full width of the RelativePanel. However, even though the RelativePanel inside the DataTemplate is also asking to fill out the width of the parent, it ignores the "align left" and "align right". I can't seem to find any way to get it to recognize it's parent container's size.
Any suggestions here would be appreciated.
<RelativePanel RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<ListView Name="LstOrders" ItemsSource="{x:Bind Vm.OrdersList, Mode=OneWay}"
SelectionMode="None"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,5,0,0">
<ListView.ItemTemplate>
<DataTemplate x:DataType="genericOrder:OrderThumbnailVm">
<RelativePanel Name="PanelThumbnail" Margin="0,0,20,0">
<RelativePanel Name="PanelOrderDetails"
Background="BlueViolet"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<TextBlock Text="{x:Bind Name}" Margin="8,0,0,0" VerticalAlignment="Center"
Foreground="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource DeletedColor}}"
TextWrapping="WrapWholeWords"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.LeftOf="BtnDeleteRestore"/>
<Button Name="BtnDeleteRestore"
Content="{x:Bind DisplayDelete, Mode=OneWay}"
Click="{x:Bind DeleteOrder}"
RelativePanel.AlignRightWithPanel="True"
FontSize="10"
Height="20"
Padding="0"
Visibility="{x:Bind ShowDeleteButton, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
</RelativePanel>
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativePanel>
That is because the value of HorizontalContentAlignmentof ListViewItem is Left, we need to override it and make it Stretch. You can find it in the ListViewItem styles and templates.
To solve this problem, as I said, we need to override its style, for example like this:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<RelativePanel>
...
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
PivotItem's border brush not setting in my UWP app. Below is my xaml code. Please help..
<Pivot x:Name="DocTab" Title="" VerticalAlignment="Top" Height="980" Margin="0,50" BorderBrush="Black" BorderThickness="1" >
<PivotItem Header="Document 1" Margin="40,30" >
</PivotItem>
<PivotItem Header="Document 2" VerticalAlignment="Top" Height="940">
</PivotItem>
</Pivot>
I have a ListView in my UWP application with this code.
<ListView Name="menuListView" HorizontalAlignment="Center"
Grid.Row="1" SelectionChanged="ListView_SelectionChanged"
BorderThickness="0,0,0,5" SelectedIndex="0"
Grid.ColumnSpan="2">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<TextBlock Name="dayTB" Text="Day" Margin="25 0 0 0" FontSize="18" />
<TextBlock Name="weekTB" Text="Week" Margin="25 0 0 0" FontSize="18" />
<TextBlock Name="monthTB" Text="Month" Margin="25 0 0 0" FontSize="18" />
</ListView>
It looks like this.
I am trying to make it look like this for quite some time now, but my tries are not successful.
Is there a way to achieve this?
Any help would be appreciated.
The right control used in the picture, is the Pivot, not ListView.
try this basic Pivot XAML code, and play around it
<Pivot Title="EMAIL">
<PivotItem Header="All">
<TextBlock Text="all emails go here." />
</PivotItem>
<PivotItem Header="Unread">
<TextBlock Text="unread emails go here." />
</PivotItem>
<PivotItem Header="Flagged">
<TextBlock Text="flagged emails go here." />
</PivotItem>
<PivotItem Header="Urgent">
<TextBlock Text="urgent emails go here." />
</PivotItem>
</Pivot>
I have a ListView in PivotItem and my pivot contains 3 pivot items. Each Piovt Item contain ListView. I want to disable scrolling on all the ListViews while user changing the Pivot Item swiping left/right. Currently while swiping left/right the pivot item is in changing mode and also my ListView scrolls. I have tried ManipulationStarted and ManipulationCompleted events but it is not working? Is there a way to achieve this? What I want is the same behavior of WP 8.1 email app, while swiping left/right it disables listview view scrolling.
<Pivot Grid.Row="1">
<PivotItem Margin="0" >
<PivotItem.Header>
<TextBlock Text="web" />
</PivotItem.Header>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="19,0,19,15"
Style="{StaticResource PhoneAccentTextSmallStyle}"
Visibility="{Binding CountryFacetCurrentlyShowing,Converter={StaticResource empltyStringToVisibilityConverter}}"
Text="{Binding CountryFacetCurrentlyShowing}"></TextBlock>
<!-- Search List Items -->
<ListView Grid.Row="2" x:Name="grdSearchResults" Width="{Binding ElementName=searchView,Path=ActualWidth}" ItemsSource="{Binding SearchedMembers}"
Visibility="{Binding ElementName=btnGridView,Path=IsEnabled,Converter={StaticResource boolToVisibiliytConverter}}"
LayoutUpdated="grdSearchResults_LayoutUpdated"
SelectedItem="{Binding SelectedMember,Mode=TwoWay}"
SelectionMode="{Binding ListViewMode}"
ItemTemplate="{Binding ItemTemplate}"
ItemContainerStyle="{StaticResource ListViewItemStyle99}">
</ListView>
<!-- Search Grid Items -->
<GridView Grid.Row="2" x:Name="grdSearchResults1" Width="{Binding ElementName=searchView,Path=ActualWidth}" ItemsSource="{Binding SearchedMembers}"
Visibility="{Binding ElementName=btnListView,Path=IsEnabled,Converter={StaticResource boolToVisibiliytConverter}}"
Margin="13,0,13,0" SelectedItem="{Binding SelectedMember,Mode=TwoWay}"
LayoutUpdated="grdSearchResults_LayoutUpdated"
SelectionMode="{Binding ListViewMode}"
ItemContainerStyle="{StaticResource GridViewItemStyle99}"
ItemTemplate="{StaticResource SearchGridItemDataTemplate}">
<!--<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="{Binding DataContext.ItemWidth, Mode=OneWay, ElementName=searchView}"></Setter>
</Style>
</GridView.ItemContainerStyle>-->
</GridView>
<TextBlock Margin="19,10" Text="No matches found." FontSize="16" x:Name="lblNoConten" Foreground="DarkGray" Visibility="{Binding NoContentVisibility}"></TextBlock>
</Grid>
</PivotItem>
<PivotItem Margin="0">
<PivotItem.Header>
<TextBlock Text="local" />
</PivotItem.Header>
</PivotItem>
</Pivot>
Fixed this problem. I was using a default ListView style(which contains nothing new) in my resources and that was causing the problem after removing default style from my resources it works :). Do not know why it was causing the issue.
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>