I am developing a windows 8.1 store app.By default windows store apps generate pages which are having 10.6" screen size and 1366*768 resolution.I want my every xaml page to fit on all screen sizes and resolutions.I solved this problem by using a Viewbox but only one page is not behaving as expected.I am doing this:<Viewbox>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
The grid is not taking the whole width of the page but Viewbox is taking.Please help.
By default the ViewBox will Stretch Uniform to maintain the aspect ratio of its contents. You can set its Stretch property to Fill if you want it to distort to fill the whole page.
You don't include the contents of the Grid in your code snippet, so it's not clear what all you have in there to know how it would stretch. Since it's stretching to fill vertically but not horizontally I expect your contents are taller than they are wide.
As Chris W notes in his comment, ViewBox is probably not what you want here. In general you're better off using flexible layout controls such as the Grid. If you remove the ViewBox the Grid (assuming it's in the root of the page) will expand to the full Window size. Using relative row and column sizes (as you do) rather than hardcoding sizes the layout should adjust to the page size.
For extreme differences such as portrait vs. landscape vs. skinny you may want to use Visual States to provide different layouts for the same content. MSDN's Quickstart: Designing apps for different window sizes goes into detail on how to do this.
Related
I can't center the shadow provided by <toolkit:ElevatedView> around the contained object. By default the shadow falls to the lower right corner. I've tried shifting with margins as well as RenderTransform, but can't find a good way to move the shadow.
What I have:
<toolkit:ElevatedView x:Name="Shadow1" Elevation="25" ShadowColor="Gray" CornerRadius="20" Background="Transparent">
<Grid>
<Grid.RenderTransform>
<TranslateTransform X="20" Y="20"/>
</Grid.RenderTransform>
...stuff
</Grid>
</toolkit:ElevatedView>
This kind of works but screws up the grid corner radius because it is being shifted beyond its max width. Is there a way to simply move the shadow location instead of trying to shift the content inside the shadow?
As of Uno Platform 3.11, the ElevatedView Control does not support changing the orientation of the shadow, only the elevation.
You may want to open an enhancement request on the Uno Platform GitHub repository.
According to the Microsoft documentation, it states the following for the Two Pane View:
By default, Pane1Length is set to Auto and it sizes itself to fit its content. Pane2Length is set to * and it uses all the remaining space.
With the following code, I don't see that defualt behavior being applied. Am I missing some extra properties I need to explicitly set? My end goal is simply for Pane1 to always show on a Single screen device, and hide Pane2.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<muxc:TwoPaneView x:Name="MyTwoPaneView">
<muxc:TwoPaneView.Pane1>
<Grid x:Name="Pane1Root"
Background="Orange">
</Grid>
</muxc:TwoPaneView.Pane1>
<muxc:TwoPaneView.Pane2>
<Grid x:Name="Pane2Root"
Background="Green">
</Grid>
</muxc:TwoPaneView.Pane2>
</muxc:TwoPaneView>
</Grid>
Fixed. Since Pane1 has no content or min width, Auto sizing gives it 0px of width in wide mode. Setting MinWidth will find that it appears when the window is wide enough.
I am trying to get a RichEditBox to take over the entire width of the app window and to be responsive to window resizing, so far the code I have is the following:
<RichEditBox HorizontalAlignment="Stretch"
TextWrapping="WrapWholeWords"
Height="250"
Name="Intro"/>
What I am getting from the code above is this:
Any ideas on how can I get this to work? Why is it that I tell the text to wrap and it doesn't follow?
UPDATE
I also tried this:
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
But the result is:
The problem that I am having is that it seems that HorizontalAlignment="Stretch" does not really do anything. The only way I am able to set a decent width is by hard-coding it, for example: Width="600". But if I do this my UI will not respond correctly to resizing. I also tried HorizontalContentAlingment="Stretch" but the result is exactly the same.
How can I get my RichEditBox take up all the available Width and Wrap at the same time?
If you look at the documentation of RichEditBox.TextWrapping, you'll notice that WrapWholeWords is invalid. You have to use
<RichEditBox TextWrapping="Wrap"/>
-or-
<RichEditBox TextWrapping="NoWrap"/>
Since Wrap is the default value, you can drop the property.
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
Edit: in reply to the updated question:
A control only takes the width of it's parent control. Some container controls (e.g. Grid) automatically take the full width available, while others (e.g. StackPanel) only take the required size of it's children. Using HorizontalAlignment="Stretch" in combination with a StackPanel as a parent control, will only use the MinWidth property instead of the full available width on your screen. Sometimes you can't directly see this issue, e.g. when your control is inside an itemtemplate of a ListView. Use the Live Visual Tree in Visual Studio to find the parent containers and locate the issue.
So in short: make sure your RichEditBox is inside a Grid (or similar control) instead of a StackPanel.
I want to change width & height(scale) all grid,images,text automatically...when changing size a screens.
Higher screens then text or images are smaller...change in my app for different Screen Resolution and Screen size.
The SharedSizeGroup attribute when defining ColumnDefinition could be of some help here assuming you're using Grids. An MSDN article about it could be found here: http://msdn.microsoft.com/en-us/library/ms751905.aspx.
Alternatively, you could create some sort of cascading bindings using the likes of this: <TextBox Height="{Binding ElementName=SomeOtherControl, Path=ActualHeight}" />
I am using Silverlight 4 for a project. I want to know if there is a way I can get the main canvas to stretch to the height and width of the browser window it is hosted in?
I want the controls within to resize in proportion to the main control that hosts all the rest of the controls in the host browser window.
This is a Prism application which has a Shell.xaml and a ContentControl within the shell.
In this prism case I want the content control to span to 100% of the screen height and width.. and when a Page.xaml loads within it I want the Page's usercontrol to fill up the entire content control of the xaml. Similarly, within the Page.xaml if I have a grid I want the grid to grow to a size no more than a fixed number of pixels
The Grid within the Page.xaml's user control seems to be sizing properly. I am having trouble getting the root user control of the Page.xaml to stretch to the entire width of the browser window. Is there a way this can be done using xaml properties only? I dont want to specify the height and width to 800 and 1200 like I have done below.
This is my code
<UserControl x:Class="MyNamespace.MyClass"
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"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
Background="#FF2D8543"
Height="800" Width="1200"
>
<Grid x:Name="LayoutRoot" Background="#FFEB0A0A"
VerticalAlignment="Center" HorizontalAlignment="Center"
Height="Auto" Width="Auto"
>
</Grid>
Thanks for your time.
Yes, use Grid instead of Canvas as top level element. Grid takes all the available space by default.
Learn more about Silverlight layout system here and here.
Update:
Just remove Width and Height attributes from the UserControl:
Height="800" Width="1200"
By setting those explicitly you are giving the control fixed size. If you don't specify Width and Height the control will take all the available space.