I'm having an issue with NavigationView control, where it doesn't align with the center and keeps weird spacing at the right.
My code for NavigationView is:
<NavigationView
Background="Red"
PaneDisplayMode="Top"
IsSettingsVisible="False"
Grid.Row="1"
HorizontalAlignment="Center"
IsBackButtonVisible="Collapsed"
>
<NavigationView.MenuItems>
<NavigationViewItem Content="Home" Tag="SamplePage1" Icon="Library"/>
<NavigationViewItem Content="Search" Tag="SamplePage5" Icon="Shop" />
<NavigationViewItem Content="Search" Tag="SamplePage5" Icon="Shop" />
<NavigationViewItem Content="Search" Tag="SamplePage5" Icon="Shop"/>
</NavigationView.MenuItems>
</NavigationView>
I don't think that you can stretch MenuItems. You can avoid that right space using the FooterMenuItems.
<NavigationView
Grid.Row="1"
HorizontalAlignment="Center"
Background="Red"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem
Content="Home"
Icon="Library"
Tag="SamplePage1" />
</NavigationView.MenuItems>
<NavigationView.FooterMenuItems>
<NavigationViewItem
Content="Search"
Icon="Shop"
Tag="SamplePage5" />
<NavigationViewItem
Content="Search"
Icon="Shop"
Tag="SamplePage5" />
<NavigationViewItem
Content="Search"
Icon="Shop"
Tag="SamplePage5" />
</NavigationView.FooterMenuItems>
</NavigationView>
UPDATE
You also can override the style from generic.xaml. This is a part of it but I guess you can start to modify here.
<!-- Top nav ItemsRepeater -->
<ItemsRepeaterScrollHost
Grid.Column="3"
Grid.ColumnSpan="5">
<ScrollViewer
HorizontalScrollBarVisibility="Hidden"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled">
<ItemsRepeater
x:Name="TopNavMenuItemsHost"
AutomationProperties.AccessibilityView="Content"
AutomationProperties.LandmarkType="Navigation"
AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}">
<ItemsRepeater.Layout>
<!--Try using UniformGridLayout instead of StackLayout-->
<!--<StackLayout Orientation="Horizontal" />-->
<UniformGridLayout
ItemsStretch="Fill"
Orientation="Horizontal" />
</ItemsRepeater.Layout>
</ItemsRepeater>
</ScrollViewer>
</ItemsRepeaterScrollHost>
Related
I am very much a beginner with WinUI 3. I am learning and don't have much direction at all.
I'm trying to add a navigation bar to the left and then add content (buttons, text boxes, etc) to the right.
I don't know if I should add the navigation view to the grid or how I would do that. I have two code examples that I've tried and neither of them are doing what I want them to do.
An example of what I want my app to look like is the WinUI 3 Gallery app.
The navigation bar is added to the app as expected, but when I try to add the grid to start adding buttons and text boxes and other things, I get an error with this code:
<Window
x:Class="WinUI_3_with_Navigation_and_Grid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI_3_with_Navigation_and_Grid"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<NavigationView x:Name="nvSample" PaneDisplayMode="Auto" Background="#c7cbd1">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
<NavigationViewItem Icon="Download" Content="Menu Item4" Tag="SamplePage4" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
<Grid Background="Gray" ColumnDefinitions="50, Auto, *" RowDefinitions ="50, Auto, *">
<Rectangle Fill="Red" Grid.Column="0" Grid.Row="0" />
<Rectangle Fill="Blue" Grid.Row="1" />
<Rectangle Fill="Green" Grid.Column="1" />
<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1" />
<Rectangle Fill="BlanchedAlmond" Grid.Row="2" Grid.Column="0"/>
<Rectangle Fill="DarkCyan" Grid.Row="2" Grid.Column="1"/>
<Rectangle Fill="MidnightBlue" Grid.Row="2" Grid.Column="2"/>
</Grid>
</Window>
Or I do this and it messes everything up...
<Window
x:Class="WinUI_3_with_Navigation_and_Grid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI_3_with_Navigation_and_Grid"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Gray" ColumnDefinitions="50, Auto, *" RowDefinitions ="50, Auto, *">
<NavigationView x:Name="nvSample" PaneDisplayMode="Auto" Background="#c7cbd1">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
<NavigationViewItem Icon="Download" Content="Menu Item4" Tag="SamplePage4" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
<Rectangle Fill="Red" Grid.Column="0" Grid.Row="0" />
<Rectangle Fill="Blue" Grid.Row="1" />
<Rectangle Fill="Green" Grid.Column="1" />
<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1" />
<Rectangle Fill="BlanchedAlmond" Grid.Row="2" Grid.Column="0"/>
<Rectangle Fill="DarkCyan" Grid.Row="2" Grid.Column="1"/>
<Rectangle Fill="MidnightBlue" Grid.Row="2" Grid.Column="2"/>
</Grid>
</Window>
The error you are getting is because Window can have one content as a child. In your first block of code, the Window has a NavigationView and a Grid.
If you want something like the WinUI 3 Gallery, you can see the actual code in the GitHub repo.
You also should consider using the Template Studio for WinUI. You can implement navigation with few clicks.
Here's a sample code to understand how to implement a simple navigation.
Let's say we have 2 pages, Page1.xaml and Page2.xaml.
.xaml
<NavigationView SelectionChanged="NavigationView_SelectionChanged">
<NavigationView.MenuItems>
<NavigationViewItem Content="Page1" Tag="Page1"/>
<NavigationViewItem Content="Page2" Tag="Page2"/>
</NavigationView.MenuItems>
<Frame x:Name="ContentFrame"/>
</NavigationView>
.xaml.cs
namespace NavigationSampleApp;
private void NavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
if (args.SelectedItem is NavigationViewItem item &&
item.Tag is string tag &&
Type.GetType($"NavigationSampleApp.{tag}") is Type pageType)
{
this.ContentFrame.Navigate(pageType);
}
}
I have the following:
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" FontSize="12" Header="Name" >
<TextBox.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Red" />
</DataTemplate>
</TextBox.HeaderTemplate>
Is there a way through the DataTemplate or Xaml behaviors to change the Foreground?
You can use XamlBehaviors.
Add Nuget Microsoft.Xaml.Behaviors.Uwp.Managed and references in Xaml.
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
Handle PointerEntered and PointerExited event on TextBlock.
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" FontSize="12" Header="Name" >
<TextBox.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Red">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerEntered">
<Core:ChangePropertyAction PropertyName="Foreground">
<Core:ChangePropertyAction.Value>
<SolidColorBrush Color="Blue" />
</Core:ChangePropertyAction.Value>
</Core:ChangePropertyAction>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="PointerExited">
<Core:ChangePropertyAction PropertyName="Foreground">
<Core:ChangePropertyAction.Value>
<SolidColorBrush Color="Red" />
</Core:ChangePropertyAction.Value>
</Core:ChangePropertyAction>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</TextBlock>
</DataTemplate>
</TextBox.HeaderTemplate>
</TextBox>
I am trying to add a commandbar to the MasterDetailsView, but I cannot figure out how to add the control using straight XAML.
Here's my code:
<CommandBar Grid.Row="0" Name="CommandBar" >
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Forward" Label="Forward" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" />
<AppBarButton Icon="Dislike" Label="Dislike" />
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<TextBlock Text="Now playing..." Margin="12,14"/>
</CommandBar.Content>
</CommandBar>
<controls:MasterDetailsView MasterCommandBar="{x:Bind CommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent" />
You can set the CommandBar like such:
<controls:MasterDetailsView MasterCommandBar="{x:Bind CommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent">
<controls:MasterDetailsView.MasterCommandBar>
<CommandBar>
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
</CommandBar>
</controls:MasterDetailsView.MasterCommandBar>
</controls:MasterDetailsView>
You should also be able to put the CommandBar into your page resources and apply using the resource
<Page.Resources>
<CommandBar x:Key="MasterCommandBar" >
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Forward" Label="Forward" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" />
<AppBarButton Icon="Dislike" Label="Dislike" />
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<TextBlock Text="Now playing..." Margin="12,14"/>
</CommandBar.Content>
</CommandBar>
</Page.Resources>
<controls:MasterDetailsView MasterCommandBar="{StaticResource MasterCommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent" />
A simple xaml like this
<FlipView>
<FlipView>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<Rectangle Fill="CornflowerBlue" />
<Rectangle Fill="CornflowerBlue" />
</FlipView>
<FlipView>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<Rectangle Fill="CornflowerBlue" />
<Rectangle Fill="CornflowerBlue" />
</FlipView>
<ListBox>
<Rectangle Fill="CornflowerBlue" />
<Rectangle Fill="CornflowerBlue" />
</ListBox>
</FlipView>
If the main FlipView's current item is a flipview,you can drag and scroll its item on two directions.But if it is a listbox,only one direction is available.means before your finger up,you cannot drag and scroll it on the other direction(Horizental or Vertical).
so how to make flipview's behavier as the same as listbox?
If you extract the default template from the FlipView you can see how the style has these setters:
<Setter
Property="ScrollViewer.IsHorizontalRailEnabled"
Value="False" />
<Setter
Property="ScrollViewer.IsVerticalRailEnabled"
Value="False" />
<Setter
From that you can deduce that setting ScrollViewer.IsHorizontalRailEnabled and ScrollViewer.IsVerticalRailEnabled on your FlipView to True gives you want you ask for.
I'm using tabitems for separating some information but as each one has different information, each one has a different size. I wonder how I could make both have the same size just changing the XAML file.
Basically, the code I did is:
<WrapPanel>
<DockPanel LastChildFill="False">
<TextBlock HorizontalAlignment="Left" DockPanel.Dock="Top" Text="Client Name" />
<TextBox MinWidth="100" HorizontalAlignment="Left" DockPanel.Dock="Top" Text="{Binding Path=ClientName, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True,NotifyOnValidationError=True}" MaxWidth="200" />
<TextBlock HorizontalAlignment="Left" DockPanel.Dock="Top" Text="Date" />
<TextBox MinWidth="100" HorizontalAlignment="Left" DockPanel.Dock="Top" Text="{Binding Path=ClientDate, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True,NotifyOnValidationError=True}" MaxWidth="200" />
<TabControl DockPanel.Dock="Top">
<TabItem ..>
</TabItem>
<TabItem ..>
</TabItem>
</TabControl>
<WrapPanel>
<Button ../>
<Button ../>
</WrapPanel>
</DockPanel>
</WrapPanel>
Regards
Claudio
Check
Let WPF Tabcontrol height assume height of largest item?
Comment here if it doesn't help