i a newbie in xaml and i need your help about tabcontrol
i want to make a tab control with tab panel or dock panel in right..
if we follow this :
<TabControl>
<TabItem Header="first" />
<TabItem Header="Second" />
</TabControl>
will automatically create left top dockpanel or tabpanel, how to make itu top right..
thanks
I'm not quite sure what you mean, but have you tried setting the TabStripPlacement property?
<TabControl TabStripPlacement="Right">
<TabItem Header="first" />
...
Related
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.
Problem
I'm using a NavigationView in my UWP application with the the PaneDisplayMode property set to Top. I've added a few menu items, but I'm having trouble adjusting the top pane's height to fit the menu items. At the moment, the pane items are getting cropped.
What Have I Tried?
I've tried to adjust the NavigationView's Height property, but it has no effect on the height of the top bar, only changing the height of the entire NavigationView (as one would expect).
Code
Here is my current XAML code:
<NavigationView
x:Name="navMain"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
IsTabStop="False"
PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem
Content="ITEM 1"
FontSize="60"
Tag="Page1" />
<NavigationViewItem
Content="ITEM2"
FontSize="60"
Tag="Page2" />
<NavigationViewItem
Content="ITEM 3"
FontSize="60"
Tag="Page3" />
</NavigationView.MenuItems>
</NavigationView>
Desired Result
I would like to adjust the top pane's height, preferably using only XAML, so that the menu items can fit and not be cropped.
All you need to do is override NavigationViewTopPaneHeight using lightweight styling, like this (you don't need to re-template the control):
<muxc:NavigationView.Resources>
<x:Double x:Key="NavigationViewTopPaneHeight">100</x:Double>
</muxc:NavigationView.Resources>
This issue is due to the default height of NavigationViewTopPane is 40. You set the FontSize="60" for the NavigationViewItem is too larger.
To solve this issue, you need to edit the ControlTemplate of NavigationView. An easy way is to follow the Use tools to work with themes easily document to edit a copy NavigationView style.
Then, you need to find a Grid named 'TopNavGrid' in the ControlTemplate. The default looks like this <Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" ..., you need to change the height to an appropriate value. For example, <Grid x:Name="TopNavGrid" Height="100" .... Then, the menu items will not be cropped.
is there a way to make the native script slider RTL?
I want it to move from right to left like this pic
For you case, you could use Slider rotate property. For Example:
<StackLayout class="p-20">
<Slider rotate="180" loaded="slloaded" minValue="0" maxValue="100" value="" />
</StackLayout>
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).
Below is code for my button, so what properties should I add to make button invisible but content must be visible.
<Button x:Name="PART_PreviousButton"
DockPanel.Dock="Left"
Content="<"
Focusable="False"
Opacity="0" />
You need to edit the button Template to have this kind of result.
This link explains it pretty well, the easiest way is to do it with blend: http://msdn.microsoft.com/en-us/library/bb613598.aspx