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.
Related
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.
What I'm trying to do was extremely easy in SL/WP 8 but seems to be impossible in WP 8.1 without redefining the Hub template myself. I want to create a hub with a header that:
Scrolls horizontally.
Has a background that scrolls along with it.
Has no margins on either side.
I know this can probably be solved by just having my background image include the background and the hub just being transparent, but I wanted to know if there was a way to solve it in XAML.
Putting a Grid with a background into the Hub's header just highlights the background as much as the hub needs--not stretching all the way across:
<Hub>
<Hub.Header>
<Grid Background="Red" Height="60">
<TextBlock Text="My Header" />
</Grid>
</Hub.Header>
</Hub>
The above makes the header with the text "My Header" but only the text part has a background. Furthermore, the Hub itself seems to have inner margins of 16 on each side so the background doesn't stretch across the whole phone screen.
Should I just be going with a background or deconstructing the template to remove the margins?
Far from an elegant solution but basically I put the background outside the Hub and gave it negative margins like so. Hacky but I guess it works.
<Grid>
<!-- This is the header bar -->
<Grid Height="64" Background="Red" />
<Hub>
<Hub.Header>
<StackPanel Margin="-6,0,0,0">
...
</StackPanel>
</Hub.Header>
<!-- actually just defined the margin in my ResourceDictionary to target all HubSections -->
<HubSection Header="section 1" Margin="-2,-20,-4,8" />
<HubSection Header="section 2" Margin="-2,-20,-4,8" />
</Hub>
</Grid>
I have a [silverlight] WizardContainer control that hosts a number of wizard pages. The wizard fits nicely on its host form. If the page has narrow content it doesn't expand to fill the container. So I set HorizontalContentAlignment to Stretch. This works.
However if the wizard page contains a datagrid with lots of columns it stretches the page instead of autoscrolling itself - as its width is not fixed. If the following XAML is on a usercontrol with a width of 350 I want the grid to be 350 and have its own scrollbars. If the WizardContainer is made smaller than the page minwidth then the MainScroller should come into play.
<Grid x:Name="LayoutRoot" >
<ScrollViewer x:Name="MainScroller" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<ContentControl Margin="4" x:Name="WizardContainer" HorizontalContentAlignment="Stretch">
<Grid Background="Red" x:Name="WizardPage" MinWidth="300">
<sdk:DataGrid HorizontalAlignment="Left" Height="120" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Width="150"/>
<sdk:DataGridTextColumn Width="150"/>
<sdk:DataGridTextColumn Width="150"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
</ContentControl>
</ScrollViewer>
</Grid>
Note if I fix the width of the datagrid everything in this XAML works. But I want the grid to expand as the user resizes the form containing the wizardcontainer.
You have the DataGrid wrapped in ScrollViewer. This, effectively, tells the DataGrid that it has infinite available width. Since the DataGrid is not constrained, it'll take as much width as it's columns desire.
You can set HorizontalScrollBarVisibility="Disabled"if that fits your design (i.e. you need only vertical scrolling from your ScrollViewer). This will disable scrolling horizontally and will constrain the DataGrid on the horizontal axis.
DataGrid has a ScrollViewer in it's ControlTemplate. As a broad general rule: try avoiding a ScrollViewer-in-a-ScrollViewer situations. It's (almost) always a headache to debug and eventually you'll have to set something as a fixed size (or calculate the size on the fly).
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.
I have popup-like border in my page. There is slider inside the popup. The slider has range from 0 to 100, but when I slide it to the right edge I get somewhere near to vlaue 93. Slider is full but its maximum is 100. It seems that slider overflowed the parent container. I tried to use all combinations of margins and static widths, but without success. Can anyone tell me what I am supposed to set, to get it work?
Here is fragment of code:
<Grid x:Name="LayoutRoot" >
...
<Border VerticalAlignment="Center" Margin="24,0" Visibility="{Binding ...}">
<StackPanel>
<TextBlock Text="choose desired position" />
<Slider x:Name="sldGoto" Maximum="100" SmallChange="1" LargeChange="10" Value="93"/>
</StackPanel>
</Border>
</Grid>
With this code (value of slider set to 93) is slider full. What's wrong?
This is a known bug in the current release when using Slider on Windows Phone 7 with the standard control template. I recommend using the approach you found on Dave's blog for now.
Well I just find article with nice Slider ControlTemplate that just works.
I would still appreciate if anyone could confirm this behavior or told me what I did wrong.
Thanks