I am attempting to make a multipage app and would like to use a common navigation toolbar across all pages. The page includes:
<Page.TopAppBar>
<AppBar >
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Page.TopAppBar>
In App.xaml I can define the AppBar that goes into the Page.TopAppBar:
<Application.Resources>
<AppBar x:Key="CommonAppBar" x:Name="AppBarCommon">
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Application.Resources>
But how can I use this AppBar defination in the Page xaml?
You can use the Frame control on one page and show another your pages inside that frame. Then you can add an AppBar to this page.
By the way, the AppBarButton is the button that is used inside an AppBar, not StackPanel and Buttons (your approach will still work, but if you expect the same behaviour and look as in other UWP apps, it's easier to use AppBarButtons).
Related
I am develop a new app for Windows 11 with WinUi 3 and in my MainPage the button appears all black in dark theme:
Why this happen?
This is a resume of my code:
<Window
<Grid Name="Main" RowDefinitions="Auto,*">
<RelativePanel Grid.Row="0"
Background="{ThemeResource SystemControlAcrylicWindowBrush}">
<TextBlock Name="TextBlock_AAA"
Text="AAA">
</RelativePanel>
<RelativePanel Grid.Row="1">
<Button Name="Button_AAA"
Content="AAA"
Click="AAA_Click"/>
</RelativePanel>
</Grid>
</Window>
#Luís, you're putting your UI directly in your window which is why it is not being styled.
Add a Blank Page (from the WinUI tab in VisualStudio) called something like "MainPage" and move your Grid into the XAML for the Page.
In the XAML for your main window, simply put <local:MainPage/> as the only content.
Now your button will look like the one in the comment by #nico-zhu-msft
I'm trying to accomplish something similar to the image below where in compact mode you have the icon and the text displayed under it.
I'm not that familiar with modifying the underlying template for the NavigationView to make this work. Can you give me an advice on how to do this?
The code for the NavigationView is pretty much the default one:
<winui:NavigationView
x:Name="navigationView"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
IsBackButtonVisible="Collapsed"
IsBackEnabled="False"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
PaneDisplayMode="LeftCompact"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}">
<winui:NavigationView.MenuItems>
<winui:NavigationViewItem x:Uid="Shell_Main" helpers:NavHelper.NavigateTo="views:MainPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_WorkOrders" helpers:NavHelper.NavigateTo="views:WorkOrdersPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Materials" helpers:NavHelper.NavigateTo="views:MaterialsPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Documentation" helpers:NavHelper.NavigateTo="views:DocumentationPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="ItemInvoked">
<ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
<Grid>
<Frame x:Name="shellFrame" />
</Grid>
</winui:NavigationView>
NavigationView icons + text in compact mode
it's hard to make interface like the screenshot that you mentioned above, you need to edit the default NavigationViewItemPresenter style, and set icon above and content bottom.
For making navigation like above, we suggest you custom side navigation with SplitView to replace default NavigationView. and set ListView as pane content. Then you could design the nav item flexibly by customizing ItemTemplate .
For more detail please refer to Xaml-Controls-Gallery here.
I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.
I have content page in my xaml file. I have a Stacklayout with orientation vertical in it. I want to put a dialog in middle of content page above this stacklayout. Please suggest some way. Thanks in advance!
An easy way to provide dialogs that feel native to the platform your on is through using the UserDialogs plugin.
If you want to create something of your own you would probably have to come up with something like this:
<Grid>
<StackLayout>
...
</StackLayout>
<Grid IsVisible="{Binding ShowMessage}">
<Label Text="Message" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</Grid>
The nested Grid will act as an overlay of sorts spanning your entire page.
In my Windows Store App I use a button which has a star shape with some text. I use the following XAML code for the button:
<Button Name="goButton" BorderThickness="0" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-91,33,0" FontSize="25" IsEnabled="True" Click="goButton_Click" >
<Grid Width="227" Height="222">
<Image Source="Assets/redstar.png" />
<StackPanel Orientation="Vertical" Margin="77">
<TextBlock TextAlignment="Center" Text="Tag"></TextBlock>
<TextBlock TextAlignment="Center" Text="ist um!"></TextBlock>
</StackPanel>
</Grid>
</Button>
This is what is the button looks like:
Unfortunately it often happens that clicks in the area of the star are not recognized, e.g. the event handler is not startet. I suppose that it has something to do with the image, for it works fine if I remove the image from the grid. But this doesn't solve my problem.
Any suggestions?
Don't see anything wrong off the top. You could try a couple of things:
Instead of click, try the Tapped event for the button.
Try tapped on the container Grid.
Get rid of the Grid & put all button content in a StackPanel & then try tapped/clicked on it.
Go with patterns like MVVM & associate your button with a Command.
Hope these help!