I want to use a pivot in Fluent UI to display the menu.
<Pivot linkSize={PivotLinkSize.large}>
<PivotItem headerText='userInfo' headerButtonProps={}>
<UserPage />
</PivotItem>
<PivotItem headerText='userConfig'>
<UserSetting />
</PivotItem>
<PivotItem headerText='Store'>
<StorePage />
</PivotItem>
<PivotItem headerText='SubInfo'>
<SubInfo />
</PivotItem>
</Pivot>
It displays like this:
But I want to let the Pivot Header to the center, I have tried to change the styles attribute, but didn't have any progress.
How to align the the Pivot Header to center?
If you want all buttons to be horizontically centered, just make the Pivot a flexbox and justify all of its items centered:
<Pivot linkSize={PivotLinkSize.large}
styles={{ root: { display: 'flex', justifyContent: 'center' } }}>
<PivotItem headerText='userInfo' headerButtonProps={}>
<UserPage />
</PivotItem>
<PivotItem headerText='userConfig'>
<UserSetting />
</PivotItem>
<PivotItem headerText='Store'>
<StorePage />
</PivotItem>
<PivotItem headerText='SubInfo'>
<SubInfo />
</PivotItem>
</Pivot>
Related
I've got two stack panels nested within another stackpanel, the nested stack panels both have images in which need to be the same size, so I've used a style resorce. But this means duplicating the style resources in each stack panel. As shown;
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horiztonal">
<StackPanel.Resources>
<Style TargetType="Image">
<Setter Property="Width" Value="20"/>
</Style>
</StackPanel.Resources>
<Image />
<Image />
<Image />
<Image />
</StackPanel>
<StackPanel Orientation="Horiztonal">
<StackPanel.Resources>
<Style TargetType="Image">
<Setter Property="Width" Value="20"/>
</Style>
</StackPanel.Resources>
<Image />
<Image />
<Image />
<Image />
</StackPanel>
</StackPanel>
Is there a way to set this style on my surrounding stackpanel and have the children inherit that style, or would I be looking at making a style template (as shown; https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/styling-and-templating) and applying it individually to my images?
I do not recommend inheriting style using "previous style" as the base. Instead, I would define the style explicitly as the base style as a static resource, and then apply the style to any control that needs that style (or inherit the style).
For ex:
In the User Control level, let's define the base style.
<UserControl>
<UserControl.Resources>
<!--Define StackPanel Style with a key as the base-->
<Style x:Key="ImageStyle" TargetType="{x:Type Image}">
<Setter .... />
</Style>
<!-- To apply the style above, you need to explicitly set the style using Style="{StaticResource ImageStyle}"-->
</UserControl.Resources>
</UserControl>
In the body, we can apply the style to specific Control, but in our case we want to apply to all Images inside the OuterStackPanel, therefore:
<StackPanel x:Name="OuterStackPanel">
<StackPanel.Resources>
<!-- Without specifying the key, this will apply the style to all Images inside this StackPanel including NestedStackPanels -->
<!-- Also, with BasedOn, this will inherit the style from ImageStyle defined above -->
<Style TargetType="{x:Type Image}" BasedOn="{StaticResource ImageStyle}">
<Setter .../> <!-- In Case if you want to add another setter, for ex: Width=20. Or don't add any other Setter to have the original style-->
</Style>
</StackPanel.Resources>
<StackPanel x:Name="NestedStackPanel1">
<Image />
<Image />
<Image />
<Image />
</StackPanel>
<StackPanel x:Name="NestedStackPanel2">
<Image />
<Image />
<Image />
<Image />
</StackPanel>
</StackPanel>
If you need to have different style for each nestedStackPanel, you can move the styling inside the nestedStackPanel, instead.
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>
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 am trying to center the pivot header in my universal 10 app,my code is this:
<Pivot>
<PivotItem x:Name="pivot0" Margin="0">
<PivotItem.Header >
<Image x:Name="headerimg" Source="images/1.png" PointerExited="pointerExited" Height="40" Stretch="Uniform" PointerMoved="headerimg_PointerMoved" />
</PivotItem.Header>
<Grid >
</Grid>
</PivotItem>
<PivotItem>
<PivotItem.Header>
<Image x:Name="headerimg1" Source="images/2.png" Height="40" Stretch="Uniform" PointerExited="headerimg1_PointerExited" PointerMoved="headerimg1_PointerMoved" />
</PivotItem.Header>
<Grid>
<TextBlock Text="test3"></TextBlock>
</Grid>
</PivotItem>
</Pivot>
I have an idea to use a header template,but I don't know how can I center the pivot header,
thanks for help
Take a look at a complete example on how to do this here: https://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/
Import parts are
Setting the HorizontalContentAllignment to get the centering > <Setter Target="HeaderClipper.HorizontalContentAlignment" Value="Center" />
Taking care of the incorrect default height of a pivot header! The default template has 48 set as height and that would not be enough in most cases!
I want to place Pivot inside Panorama and disable horizontal flick gestures for Pivot.
If I set IsLocked="True" for Pivot, when I make horizontal flick,
Panorama item is not changing.
If i set IsHitTestVisible="False" for
Pivot, I cant tap anything inside Pivot.
How can make this:
Pivot can "sense" Tap and vertical flick gestures
Panorama can "sense" horisontal flick gestures
This is not recommended behavior for Windows phone platform. Putting a Pivot inside a Panorama doesn't make sense at all and goes against WP design guidelines. Cant you have the same functionality with Panorama control alone?
Use PanoramaItems as you use PivotItems, if you want vertical scrolling use a ScrollView instead. Doing like you mentioned might make your app not certifiable.
<Grid x:Name="LayoutRoot">
<phone:Panorama Title="my application">
<!--Panorama item one-->
<phone:PanoramaItem Header="item1">
<Grid>
<ScrollViewer Height="480">
<StackPanel>
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
</StackPanel>
</ScrollViewer>
</Grid>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item2">
<Grid/>
</phone:PanoramaItem>
<phone:PanoramaItem Header="item3">
<Grid/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
With the above Panorama Page you can have horizontal scrolling among PanoramaItems and Vertical Scrolling for the content of the PanoramaItem