I want to create a simple input dialog and I'm having a hard time getting it to stretch to 100% of the screen width (I can manually set width which is not what I want to do). I've tried the horizontal stretch, I've tried setting a left and right margin (hoping it would anchor the ends to the margin), I've tried specifying RowDefintiions in the grid with "*" Width. I can see in the XAML editor that the popup looks to be 100% of the screen width, but the Grid is not.
Take the below as a simple example.. I want the popup and/or the grid to span 100% width on the screen. Is there a straightforward way to accomplish this?
<Page
x:Class="TimeCalculator.BlankPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TimeCalculator"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Popup x:Name="pop" IsOpen="True" Margin="0,0,0,0">
<Grid x:Name="popGrid" Background="Green" HorizontalAlignment="Stretch">
<TextBlock Text="This is the popup where I will ask for input" HorizontalAlignment="Stretch"></TextBlock>
</Grid>
</Popup>
</Grid>
try
popGrid.Width = Window.Current.Bounds.Width;
Related
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.
In a fresh Universal Windows Platform app, I am trying to set the Background of an ItemsControl. But it doesn't seem to do anything. The only changes I've made to the VS template are in MainPage.xaml, which now looks like this:
<Page
x:Class="UWPPlayground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWPPlayground"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" x:Name="Hello">
<Grid Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*">
</ColumnDefinition>
<ColumnDefinition Width="*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Row="0" Grid.Column="0" Width="60" Height="30" Foreground="Wheat" Background="White">
<TextBlock Text="Hello World!"></TextBlock>
<TextBlock Text="Can you see this?"></TextBlock>
</ItemsControl>
<Grid Grid.Row="0" Grid.Column="1" Background="Purple"></Grid>
</Grid>
</Page>
The result is shown below. The Foreground property of the ItemsControl seems to be working just fine, as the TextBlocks have wheat-colored text. Due to the small size of the control, the text is cut-off, as expected. The Background, however, is not visible. What am I missing?
ItemsControl inherits from Control, which defines lots of visual properties at the base class level which do not necessarily influence the appearance of the control directly. These properties are usually referenced via TemplateBindings in the ControlTemplate, which then gives rise to the desired appearance. Whether or not the template uses these properties determines whether or not they have any use at all.
You'll notice that changing a UserControl's background also does nothing (for the same reason mentioned above).
Non-control classes like Grid, Rectangle, Border (etc) do honor such properties out of the box, since these are the elements typically used in the templates of controls to produce a certain appearance.
The reason why ItemsControl-derived classes (like ListView) do honor the background property is because some root-level element in its template references the Background property (via TemplateBinding). ItemsControl on its own has no template.
I think the reason why the Foreground property works is because it will inherit its value from the parent. (Some dependency properties can inherit their values like this).
The easiest way to set a background for your ItemsControl would be to wrap it in a Border (or Grid, they're essentially the same now) and set a background brush on that instead.
I don't recommend you do what follows for your example, but this is what you would need to do if you wanted the Background property to work:
<ItemsControl Background="Red">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Grid Background="{TemplateBinding Background}">
<ItemsPresenter/>
</Grid>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
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.