I'm trying to make text editor for Windows (PC) in UWP but the scaling is not working, I've done the same in WPF and it worked.
The page size is set to 800x600, these are columns:
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="filename" Margin="10" Grid.ColumnSpan="2">Untitled</TextBlock>
<Border Margin="5" Grid.Row="1">
<TextBox x:Name="text" AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible" TextChanged="text_TextChanged"/>
</Border>
<StackPanel Grid.Row="2" Margin="3,3" Orientation="Horizontal" MinHeight="31" >
<Button x:Name="saveButton" FontSize="15" Content="Save" Margin="0,0,0,-0.125" VerticalAlignment="Top" Click="saveButton_Click" />
<Button x:Name="button" Content="Save as..." Margin="5,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="button_Click" />
<Button x:Name="loadButton" FontSize="15" Content="Read" Margin="5,0" VerticalAlignment="Bottom" Click="loadButton_Click"/>
</StackPanel>
</Grid>
Title is in 1st row, content is in 2nd, buttons (save, load) are in 3rd, it looks like grid it wouldn't exist:
That's with normal size
After size change
How do I fix it?
The page size is set to 800x600
If you've set the page size to 800x600 like this: <Page Width="800" Height="600"... it will always be 800x600 and it will not scale. If you want it to scale properly, just don't set these properties.
I assume you wanted to set the size of the app when it starts for the first time. You can approach it by setting the ApplicationView.PreferredLaunchViewSize.
Also I recommend to use the RichEditBox to display and edit text files.
Related
I'm trying to create a button bar with images. My Xaml is as follows:
<Border Grid.Row="1" Margin="0" BorderBrush="Black" BorderThickness="1">
<StackPanel x:Name="ButtonsPanel" Orientation="Horizontal" Margin="0">
<Button x:Name="NewButton" Margin="3" Command="ApplicationCommands.New" ToolTip="New project" BorderThickness="0">
<Image Source="/Resources/NewFile_16x.png"/>
</Button>
<Button x:Name="OpenProjectButton" Margin="3" Command="ApplicationCommands.Open" ToolTip="Open project" BorderThickness="0">
<Image Source="/Resources/OpenFile_16x.png"/>
</Button>
<Button x:Name="SaveProjectButton" Margin="3" Command="ApplicationCommands.Save" ToolTip="Save project" BorderThickness="0">
<Image Source="/Resources/Save_16x.png"/>
</Button>
</StackPanel>
</Border>
It all looks fine in the IDE (VS2019 Community) but when I run the app, the images are really small. If I've tried adding Height and Width properties to the Button and/or the Image tag, but all that does display a gray square of the correct dimensions but with no image. I added Stretch="Fill" in the image tag, but it didn't help. I even tried images of different sizes to see if that was the problem, but nothing seems to help.
Any advice would be appreciated.
[Edit]
I was wrong about what was being displayed with the small images. As it happens, it's the same gray squares, just smaller. So it's not a sizing problem per se, but a rendering one ... ?
If it helps any, here is a screenshot:
1) Check that images are really located under the Resources folder of the project. Sometimes the gray square is displayed instead of image if wrong location of the image file is specified.
2) Set the row height containing buttons to Auto should display the images in original size when Stretch property is defined as Uniform (if is default value). So, try the following:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Margin="0" BorderBrush="Black" BorderThickness="1">
<StackPanel x:Name="ButtonsPanel" Orientation="Horizontal" Margin="0">
<Button x:Name="NewButton" Margin="3" Command="ApplicationCommands.New" ToolTip="New project" BorderThickness="0">
<Image Source="pack://application:,,,/Resources/NewFile_16x.png" />
</Button>
<Button x:Name="OpenProjectButton" Margin="3" Command="ApplicationCommands.Open" ToolTip="Open project" BorderThickness="0">
<Image Source="pack://application:,,,/Resources/OpenFile_16x.png" />
</Button>
<Button x:Name="SaveProjectButton" Margin="3" Command="ApplicationCommands.Save" ToolTip="Save project" BorderThickness="0">
<Image Source="pack://application:,,,/Resources/Save_16x.png" />
</Button>
</StackPanel>
</Border>
</Grid>
I am working on a Phone Dialer UWP application for Windows Mobile devices. In searching for dialer examples, I came across the PhoneCall sample that is bundled with Windows Universal Samples at https://github.com/Microsoft/Windows-universal-samples. The PhoneCall sample contains an example implementation of Dialer and a DialerPanel, complete with a text box to display or edit the number being typed, as well as the Call button. So far so good.
However, the sample dialer panel is hosted as a PivotItem in a tabbed interface implemented by MainPage.xaml, and it occupies the entire space available to it.
What I am looking for is something like a DialerPanel in the sample, but one that could shrink to fit in my Grid cell. I will have the available space split into two Grid cells, with the upper half occupying a custom control or an image, while the lower half will host the Dial Pad.
In my attempt to accomplish what I need, I modified the sample DialerPanel.xaml as follows:
I created a new outer Grid with two rows, each taking up 50% of the available space.
In the upper row, I added a rectangle with a fill of "Light Yellow"
In the lower row, I added the original Dialer Panel layout contained in a Grid (basically, I moved the ORIGINAL Grid into a Grid cell at Row 1, Column 0.
Below is the image of my XAML outline (with certain blocks collapsed for clarity):
Here's the XAML:
<UserControl
x:Class="PhoneCall.Controls.DialerPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhoneCall.Controls"
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>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Rectangle Fill="LightYellow" Grid.Row="0"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<local:LinePicker Margin="0,20,0,0"/>
<Grid Style="{StaticResource DigitViewGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="dialerNumberControlScrollviewer"
Grid.Column="0"
Style="{StaticResource DigitViewScrollerStyle}">
<TextBlock Style="{StaticResource DigitViewTextStyle}"
SizeChanged="OnDialerNumberControlSizeChanged"
Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}">
</TextBlock>
</ScrollViewer>
<Button Grid.Column="1"
Command="{Binding ProcessBackspace}"
IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
Holding="OnBackspaceHolding">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="30"/>
</Button>
</Grid>
</StackPanel>
<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">
<StackPanel Style="{StaticResource DialpadPanelStyle}">
<local:Dialpad x:Name="Dialpad"/>
<Button IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
Style="{StaticResource AccentLongButtonStyle}"
Command="{Binding ProcessDialDialerNumberHeap}" >
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
<CompositeTransform ScaleX=".75" ScaleY=".75"/>
</FontIcon.RenderTransform>
</FontIcon>
<TextBlock Text="Call"
Grid.Row="1"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="0,4,0,0"
LineHeight="14"
HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</UserControl>
When I build the app with the changes above and run the sample, this is how it appears on the phone with my rectangle covering the Dial Pad:
I tried a couple of things including reduced fixed width and height for the Dialer Panel, but I could not make it work.
A couple of questions:
1. What am I doing wrong here and how can I fix it?
2. Is there a third party DialPad control (free or paid) that I can reference in my project and just use it?
Thanks for all your help!
I think the problem is in this line:
<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">
This stack panel starts in row 0 where you the put
<StackPanel Grid.Row="0">
Can you try this?
<StackPanel Grid.Row="2" VerticalAlignment="Bottom">
This question already has an answer here:
How do I place a text over a image in a button in WinRT
(1 answer)
Closed 5 years ago.
I am learning different ways of achieving certain layouts with XAML in UWP (I know I'm late to the party but I just started with the UWP stuff!)
What I am trying to achieve is a main navigation page kind of thing from a hub control on my main page. At every HubSection, I will have button on each column of a 2-column grid, which will contain buttons. Ive'tried something similar to this post but the debugger kept failing to attach to my UWP app when I used images instead of textblocks.
Essentially, what I've got until now is something like this: (I've shared my code down below)
But what I am trying to achieve is each button having its own image background and a separate TextBlock with semi-transparent background at the bottom centre of the button... (I've only photo shopped it, this is the thing I am trying to achieve...)
So this is what I've tried so far... I've also tried the relative panel but no luck...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Center">Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Grid>
My complete code looks something like this for this page.
<Page
x:Class="VaultManager.Terminal.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"
mc:Ignorable="d">
<Grid Background="Black">
<Hub SectionHeaderClick="Hub_SectionHeaderClick">
<Hub.Header>
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
</Grid>
</Hub.Header>
<HubSection Header="Overview">
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<RelativePanel>
<TextBlock>Column 0 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</RelativePanel>
</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 1 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<StackPanel>
<TextBlock>Column 1 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="Videos" Name="Videos">
<!-- yada yada -->
</HubSection>
<HubSection Header="Audios" Name="Audios">
<!-- blah blah -->
</HubSection>
</Hub>
</Grid>
Good job giving us all that info. You may want to take a look here since the asker in that question seems to have had a similar issue. The answerer suggested using a Grid instead of a StackPanel. Hope that helps. After that, you should be able to adjust the transparency of the text. If you are using visual studio you can just click on the text element and adjust the background brush from the Properties tab. The button w/ the image should look like this:
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock Text = "Column 0 Item 1">
<TextBlock.Background>
<SolidColorBrush Color="(**Colour here**)" Opacity = "(**Opacity Here {1 being opaque and 0 being transparent}**)/>
</TextBlock.Background></TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
</Button>
I have a user control which contains a media element to play a video, a slider used as a trackbar for the video and a text block that display the title of the video. These 3 controls are placed in a grid which in turn is placed inside a border.
I want the user to be able to translate, rotate and scale this control. The problem is that when the control scales it's content scales also and i want the slider control not to scale. Is it possible to somehow keep the slider control from scaling?
I should also mention that the manipulation of the control is handled by setting the control ismanipulationenabled to true and using the manipulation delta event.
EDIT:
This is how the xaml for the control looks like:
<Grid Name="movieGrid" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="moviePlayerBorder" Background="Black" BorderBrush="Blue" BorderThickness="2,2,2,2" CornerRadius="5,5,5,5" Grid.RowSpan="2">
<Grid Name="contentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WinControls:MediaElement x:Name="movieDisplay" ScrubbingEnabled="True" IsEnabled="True" Grid.RowSpan="2"
LoadedBehavior="Manual" UnloadedBehavior="Manual"
MediaOpened="movieDisplay_MediaOpened">
</WinControls:MediaElement>
<Image x:Name="btnPlay" Grid.Row="1" Height="60" Width="60" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="120,44,112,43" Grid.RowSpan="2">
</Image>
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch" Margin="6,2,6,0" Grid.Row="0">
<TextBlock Text="test" Margin="0,0,0,0" Name="txtBlockTitlu" HorizontalAlignment="Stretch"
FontSize="14" VerticalAlignment="Top" Foreground="White" TextWrapping="Wrap" Visibility="Collapsed"/>
</DockPanel>
</Grid>
</Border>
<Slider x:Name="seekBar" VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="299"
Thumb.DragStarted="seekBar_DragStarted" Thumb.DragCompleted="seekBar_DragCompleted" Thumb.DragDelta="seekBar_DragDelta" MaxHeight="33"
Minimum="0" Maximum="286" Height="33" Margin="0,0,0,0" Grid.Row="1"/>
</Grid>
if you want to build a fully scaleable user control you should define the layout only with the size values of a row column / row row eg. auto, x* or fixed values (if realy needed).
do not use fixed size values on elements.
I am building a webapp in Silverlight 4.0 and I would like it to have it expand to fill the width and height of the web browser. However, I can only get it to remain top center at the moment.
I have a Grid with 3 rows, 2 columns and Controls inside these which fill the cells. Therefore I only believe that I need the Grid to stretch to the size of the UserControl and the UserControl to the size of the page. But how should I do this?
Example XAML:
<UserControl x:Class="RepentWeb.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:local="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.WatermarkedTextBox"
mc:Ignorable="d"
d:DesignHeight="740" d:DesignWidth="1020" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid x:Name="LayoutRoot" Background="White" Width="1020">
<Grid Height="740" HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" Width="1020" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="372*" />
<RowDefinition Height="40*" />
<RowDefinition Height="328" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="415*" />
<ColumnDefinition Width="411*" />
</Grid.ColumnDefinitions>
<local:WatermarkedTextBox Watermark="Source" Margin="12,6,8,8" Name="tbCode" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" KeyDown="tbCode_KeyDown" IsTabStop="True" />
<local:WatermarkedTextBox Grid.Column="1" Watermark="Output" AcceptsReturn="True" Margin="9,6,15,8" Name="tbOutput" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
<local:WatermarkedTextBox Grid.Row="1" Grid.Column="1" Watermark="Stack" Grid.RowSpan="2" AcceptsReturn="True" Margin="9,6,15,6" Name="tbStack" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" d:LayoutOverrides="GridBox" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
<local:WatermarkedTextBox Grid.Row="2" Grid.Column="0" Watermark="Command line args, one per line. Strings/arrays wrapped in quotes" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" Margin="12,8,8,6" Name="tbArgs" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" />
<Button Grid.Row="1" Grid.Column="0" Content="Run" Height="23" HorizontalAlignment="Left" Margin="12,8,0,0" Name="btnRun" VerticalAlignment="Top" Width="75" Click="btnRun_Click" />
<Button Grid.Row="1" Grid.Column="0" Content="Step Forward" Height="23" HorizontalAlignment="Left" Margin="93,8,0,0" Name="btnStep" VerticalAlignment="Top" Width="115" Click="btnStep_Click" />
<Button Grid.Row="1" Grid.Column="0" Content="Stop" Height="23" HorizontalAlignment="Left" Margin="214,8,0,0" Name="btnStop" VerticalAlignment="Top" Width="75" Click="btnStop_Click" IsEnabled="False" />
<Button Grid.Row="1" Content="Clear All" Height="23" HorizontalAlignment="Right" Margin="0,8,142,0" Name="btnClear" VerticalAlignment="Top" Width="75" Click="btnClear_Click" />
<TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="376,0,0,0" Name="lblCurrPos" Text="Current Position:" VerticalAlignment="Top" />
<TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="376,17,0,0" Name="lblChar" Text="Char: 0" VerticalAlignment="Top" />
<TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="433,17,0,0" Name="lblSymbol" Text="Symbol: " VerticalAlignment="Top" />
</Grid>
</Grid>
</UserControl>
Take 2:
Thanks for the example XAML. Makes it much easier than guessing.
There are a number of changes needed.
First you need to remove the fixed
width and height from your outer
grids as previously mentioned.
Next your left column should be an auto width as the row of buttons determines the width of the left side.
The right column should be simply 1* (or just *) to use up the remaining column space.
The middle row needs to be either auto (to fit the row of buttons) or fixed pixel height. As you have a text box on the right overlapping that row, auto would cause problems if you add a splitter later, so I recommend a fixed pixel height of 40.
The first and last row should both be * in height. They then use 50% of the remaining height.
The buttons should be in a stack panel (as mentioned in the other answer) and the info text in a grid within that stack panel.
If you resize they should change as per the pictures below:
Updated XAML below:
<Grid x:Name="LayoutRoot" Background="White">
<Grid HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="40" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="510" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<local:WatermarkedTextBox Watermark="Source" Margin="12,6,8,8" Name="tbCode" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" KeyDown="tbCode_KeyDown" IsTabStop="True" />
<TextBox Grid.Column="1" Watermark="Output" AcceptsReturn="True" Margin="9,6,15,8" Name="tbOutput" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
<TextBox Grid.Row="1" Grid.Column="1" Watermark="Stack" Grid.RowSpan="2" AcceptsReturn="True" Margin="9,6,15,6" Name="tbStack" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" d:LayoutOverrides="GridBox" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
<TextBox Grid.Row="2" Grid.Column="0" Watermark="Command line args, one per line. Strings/arrays wrapped in quotes" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" Margin="12,8,8,6" Name="tbArgs" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" />
<StackPanel Orientation="Horizontal" Grid.Row="1" d:LayoutOverrides="Width" HorizontalAlignment="Left" Margin="12,0,0,0">
<Button Content="Run" Height="23" Margin="5,0,0,0" x:Name="btnRun" VerticalAlignment="Center" Width="75" Click="btnRun_Click" />
<Button Content="Step Forward" Height="23" Margin="5,0,0,0" x:Name="btnStep" VerticalAlignment="Center" Width="115" Click="btnStep_Click" />
<Button Content="Stop" Height="23" HorizontalAlignment="Left" Margin="5,0,0,0" x:Name="btnStop" VerticalAlignment="Center" Width="75" Click="btnStop_Click" IsEnabled="False" />
<Button Content="Clear All" Height="23" Margin="5,0,0,0" x:Name="btnClear" VerticalAlignment="Center" Width="75" Click="btnClear_Click" />
<Grid Width="107" Margin="13,0,0,0">
<local:WatermarkedTextBox Height="23" HorizontalAlignment="Left" x:Name="lblCurrPos" Text="Current Position:" VerticalAlignment="Top" />
<local:WatermarkedTextBox HorizontalAlignment="Left" Margin="0,17,0,0" x:Name="lblChar" Text="Char: 0" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment" />
<local:WatermarkedTextBox Height="23" HorizontalAlignment="Left" Margin="57,17,0,0" x:Name="lblSymbol" Text="Symbol: " VerticalAlignment="Top" />
</Grid>
</StackPanel>
</Grid>
</Grid>
Take 1:
The overall Silverlight shell size is determined by the settings in your web hosting page and defaults to full browser so the problem is likely your control or more likely the grid within the control.
Make sure you do not have a fixed size specified in either the user-control or the inner grid. Then both default to stretching to the parent.
The exception is if all your columns
are fixed width, then the grid will
collapse back to the total width of
the columns, or if both are "auto" width in
which case the columns will collapse
to the width of the objects within
them (and not force them to stretch).
Make sure at least one of your grid columns is star sized (e.g. 1*) to ensure it takes up the remaining space of the grid. If you want each column to take up 50% of the browser, make them both "1*" width.
If you can post your sample XAML it will be easier to provide an exact fix.
There are a number of things you should consider. #1, remove any fixed width items, such as on the layout grid. (1020)
When you use "*" syntax within row & column definitions with numbers, this is like using a weighting. It isn't like a minimum size or anything like that. Typically this would be for something to use 1/3rd of available width would be to have a two columns with widths of "" (or "1") and "2*" respectively. 2* tells that column to request double the space. (In this case 2/3rds) using heights of 372* and 238* are weighted for available space. If you want controls to have a minimum size then assign the controls MinimumWidth/Height values. (They'll use avaialable space beyond that size as available.)
Generally it's a good idea to use 1 control per cell in a grid. If you want to position more than one control in a cell, then make that another layout control such as a StackPanel or Grid. Stack panels plus left margins work well for arranging things like buttons or text elements. Positioning multiple controls in a layout area using margins is quite messy. If you want controls arranged in multiple rows, or evenly taking up avaiable space, a Grid is preferable.