I made a simple app that does nothing. It inly displays a NavigationView with two items and a TextBlock as its content. This is the code:
<Page
x:Class="test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<NavigationView>
<NavigationView.MenuItems>
<NavigationViewItem Content="First Item" />
<NavigationViewItem Content="Second Item" />
</NavigationView.MenuItems>
<TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="Welcome to my Page"/>
</NavigationView>
</Grid>
</Page>
My app looks like this:
Why is there extra space at the top of the TextBlock? And how to remove that space? I know it is possible because the News app uses NavigationView and there is no vertical margin. Here is its screenshot:
You need to set the AlwaysShowHeader property to False:
<NavigationView AlwaysShowHeader="False">
This is called out in the docs here, though the new preview version seems to change this behavior currently and not show any header by default.
Related
I followed the instructions from this article from official UWP team using VS2017 on my Windows 10 version 1809. But the following XAML is not showing menu bar. I've tested it on top of the app window and then even in the middle of the window but to no avail. I've also installed Windows UI Library following this article. What could be a reason and how to resolve the issue?
<Page
x:Class="Junk_UWP.MainPage"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Junk_UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<MenuBar Margin="0,338,0,622" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<MenuBarItem Title="File">
<MenuFlyoutSubItem Text="New">
<MenuFlyoutItem Text="Plain Text Document"/>
<MenuFlyoutItem Text="Rich Text Document"/>
<MenuFlyoutItem Text="Other Formats..."/>
</MenuFlyoutSubItem>
<MenuFlyoutItem Text="Open..."/>
<MenuFlyoutItem Text="Save"/>
<MenuFlyoutSeparator/>
<MenuFlyoutItem Text="Exit"/>
</MenuBarItem>
<MenuBarItem Title="Edit">
<MenuFlyoutItem Text="Undo"/>
<MenuFlyoutItem Text="Cut"/>
<MenuFlyoutItem Text="Copy"/>
<MenuFlyoutItem Text="Paste"/>
</MenuBarItem>
<MenuBarItem Title="Help">
<MenuFlyoutItem Text="About"/>
</MenuBarItem>
</MenuBar>
<Button Content="Button" HorizontalAlignment="Left" Margin="750,466,0,0" VerticalAlignment="Top" Click="Button_Click"/>
</Grid>
</Page>
Snapshot of Design Page of above Xaml:
The reason seems to be your huge vertical margins for the MenuBar. You need quite a big window and screen to display those margins. Also it doesn't make sense to use VerticalAlignment="Stretch", though I am not sure if it can break something.
This question shows how to substitute PivotItem headers text with images, but I wish to have both (plus, the text should be a variable).
The goal is to replicate the following Navigation model:
(source: s-msft.com)
Is it possible to adapt this simple XAML to achieve both text and image? If not, how to do it?
<Page
x:Class="Lenny.Windows.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:Lenny.Windows.Views"
mc:Ignorable="d">
<Page.BottomAppBar>
<CommandBar>
<CommandBar.Content>
<Grid/>
</CommandBar.Content>
<AppBarButton Icon="Accept" Label="appbarbutton"/>
<AppBarButton Icon="Cancel" Label="appbarbutton"/>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}"></Image>
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png" >
<Grid />
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
</Pivot>
</Grid>
</Page>
If you are using MVVM you can use a property from your ViewModel and add a textblock in the header template to make a binding with this property and you can change this value from your ViewModel.
I said this because you need the text needs to be variable.
If you are not using MVVM pattern you need to use the Binding Approach
https://msdn.microsoft.com/en-us/library/windows/apps/mt269383.aspx
in xaml you need to add a stackpanel with orientation = horizontal and add your text and your image inside all of them in your header template
I would like to have an image in this grid that serves as a background. Any attempt till now at inserting an image control resulted in the image being on top of the buttons while I would like it to be on the back.
<Page
x:Class="ZimmerFrei_v0._1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ZimmerFrei_v0._1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid >
<Button x:Name="btnNearMe"
Content="Near Me"
HorizontalAlignment="Left"
Margin="99,181,0,0" VerticalAlignment="Top"
Height="76"
Width="216"
Click="btnNearMe_Click"/>
<Button x:Name="btnBestOffers"
Content="Button"
HorizontalAlignment="Left"
Margin="99,312,0,0"
VerticalAlignment="Top"
Height="76" Width="216"
Click="Button_Click"/>
<Image />
</Grid>
The simplest thing that you can do here is to give your Grid an Image Brush. Simply head to the Brush section in your properties windows and select the Tile Brush there. To the ImageSource property specify the image you want.
You can also check out this link for more help.
Hope this solves your problem.
I would like to show a ContentDialog on first launch of my app, to show the EULA to the end user.
It seems that if an AppBar is defined in the calling page the two buttons in the dialog are not visible, an empty area with the same size of the command bar area defined in the calling page, is shown instead.
This is the markup on the ContentDialog:
<ContentDialog
x:Class="MyApp.EulaPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="TERMS OF USE"
PrimaryButtonText="i agree"
SecondaryButtonText="cancel"
PrimaryButtonClick="OnAgreeButtonClick"
SecondaryButtonClick="OnCancelButtonClick">
<Grid x:Name="ContentPanel" Margin="0,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="524" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Margin="0,0,0,2" >
<RichTextBlock IsTextSelectionEnabled="False" TextAlignment="Left" TextIndent="0" FontSize="14" FontFamily="Segoe WP" >
</RichTextBlock>
</ScrollViewer>
</Grid>
The GridRowDefinition has a fixed hight, because the text in the RichTextBlock needs to be scrolled.
I have prepared a sample project that can be found here. The zip file contains also a screenshot showing how I see the dialog.
I had the same problem and I have solved it by modifying/removing Height/Width and Margins of the Contentdialog
I am Using silverlight4 I have developed one page when I navigate to this page from Other Silverlight Page the Position is at the bottom of the page .I need to set the Focus on top of the silverlight Page.I am not using ScrollViewer on my Page.
Open MainPage.xaml file and replace the code with the following.
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="ScrollViewerControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer Height="300" Width="300" Name="scrollViewer1"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<ScrollViewer.Content>
<StackPanel>
' Content Here
</StackPanel>
</ScrollViewer.Content>
</ScrollViewer>
</Grid>
</UserControl>
set the ScollViewer offset to zero like
scrollViewer1.ScrollToVerticalOffset(0);
then your vertical scroll will always be on Top.