I am very, very new to XAML. I'm using Visual Studio Express 2013 and I'm in WPF having problems getting a grid's labels, textboxes, and checkboxes to fill the remaining white space when a form is maximized or resized. The controls all get slightly larger, but then stop at about a 25-33% increase in size. I have borders under each text box to make the textboxes stand out on the form.
I'm thinking that the answer may lie in putting grid.columdefinitions and rowdefinitions around each control and setting the height and width to '*' rather than just slapping them all in a large one-cell grid. I apologize for the lengthy attributes, I was trying several solutions and using GUI.
Grid x:Name="Form"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="620" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid.Resources>
<XmlDataProvider x:Key="xmlData" XPath="/data" IsAsynchronous="False">
<x:XData>
<data xmlns="">
</data>
</x:XData>
</XmlDataProvider>
</Grid.Resources>
<Label Content="TEST PAGE 1" Margin="103,4,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="1"/>
<TextBox x:Name="line1box" Height="18" Margin="313,0,0,0" TextWrapping="Wrap" Width="37" TextAlignment="Center" BorderThickness="0" MaxLines="1" MaxLength="4" FontSize="10"/>
<Border BorderBrush="Black" BorderThickness="0,0,0,1" Margin="313,17,0,0" Width="37" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="1"/>
<Label Content="Line 1" Margin="350,3,0,0" RenderTransformOrigin="-0.233,0.493" FontSize="9" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="1"/>
<Label Content="Line 2" Margin="350,21,0,0" RenderTransformOrigin="-0.233,0.493" FontSize="9" HorizontalAlignment="Left" Padding="5" VerticalAlignment="Top" Grid.RowSpan="2" Grid.Column="1"/>
<TextBox x:Name="line2box" Margin="313,19,0,0" TextWrapping="Wrap" Width="37" TextAlignment="Center" BorderThickness="0" MaxLines="1" MaxLength="4" FontSize="10" TabIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.RowSpan="2" Grid.Column="1"/>
<Border BorderBrush="Black" BorderThickness="0,0,0,1" Margin="313,5,0,0" Width="37" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<CheckBox x:Name="check1" Content="check1" Margin="312,18,0,0" FontSize="9" TabIndex="3" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<CheckBox x:Name="check2" Content="check2" Margin="361,18,0,0" FontSize="9" TabIndex="4" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<Label Content="Line 3" Margin="0,31,0,0" FontSize="9" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1"/>
<TextBox x:Name="insured" Margin="56,33,0,0" TextWrapping="Wrap" Width="265" BorderThickness="0" Height="25" AcceptsReturn="True" MaxLines="2" FontSize="10" TabIndex="5" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2"/>
<Border BorderBrush="Black" BorderThickness="0,0,0,1" Height="1" Margin="56,45,0,0" Width="265" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2"/>
<Border BorderBrush="Black" BorderThickness="0,0,0,1" Height="1" Margin="56,57,0,0" Width="265" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2"/>
<Label Content="Line 4" Margin="269,34,0,0" RenderTransformOrigin="-0.233,0.493" FontSize="9" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<TextBox x:Name="line4box" Margin="309,37,0,0" Width="107" BorderThickness="0" FontSize="9" MaxLines="2" TabIndex="6" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<Border BorderBrush="Black" BorderThickness="0,0,0,1" Margin="309,49,0,0" Width="107" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<Label Content="line5" Margin="261,48,0,0" RenderTransformOrigin="-0.233,0.493" FontSize="9" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<TextBox x:Name="line5box" Margin="309,50,0,0" Width="107" BorderThickness="0" FontSize="9" MaxLines="2" TabIndex="7" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<Border BorderBrush="Black" BorderThickness="0,0,0,1" Margin="309,63,0,0" Width="107" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
This is the main problem when using the Visual Studio designer to create XAML-based UIs rather than creating XAML by hand.
Basically, all your UI elements have Hardcoded, fixed positions defined by their margins, for example:
<Label .. Margin="350,21,0,0" ... />
which constrain their maximum size, rather than having relative positions determined by their parent container and stretching to the available space.
Please have a look at WPF Layout Tutorial for introductory material on how to create XAML-based layouts in a proper fashion.
Related
In my serial port WPF application , the labels (BaudRate,Parity,DataBits and stopBit) and the StatusBar (for displaying PortStatus) are in wrong place when I maximise the window.
I would like to have suggestion from expertise to resolve my issue.
So please let me know if I can make any changes/edit on my xaml file to have these orientation on the same place as it is in Normal window mode.
<Window
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:SerialReadAndWrite"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="ATR220ReadAndWrite.MainWindow"
mc:Ignorable="d"
Title="ATR220ReadAndWrite" Height="450" Width="800">
<Grid Margin="0,0,-71,-107">
<ComboBox x:Name="ComPortComboBox" HorizontalAlignment="Left" Height="14" Margin="115,20,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="ComPort_SelectionChanged" DropDownOpened="ComPort_DropDownOpened" VerticalContentAlignment="Stretch" IsSynchronizedWithCurrentItem="False" FontSize="9" FontFamily="Arial"/>
<Label Content="PortNumber :" HorizontalAlignment="Left" Margin="21,14,0,0" VerticalAlignment="Top"/>
<Label Content="PortSettings :" HorizontalAlignment="Left" Margin="21,58,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.546,3.143" FontSize="10" FontFamily="Arial"/>
<Image HorizontalAlignment="Left" Height="26" Margin="359,14,0,0" VerticalAlignment="Top" Width="29" RenderTransformOrigin="-0.23,0.36"/>
<ComboBox x:Name="BaudRateComboBox" HorizontalAlignment="Left" Margin="115,84,0,0" VerticalAlignment="Top" Width="98" Height="17" SelectionChanged="BaudRate_SelectionChanged" IsEnabled="False" IsReadOnly="True" FontSize="9" FontFamily="Arial">
<System:String>115200</System:String>
<System:String>57600</System:String>
<System:String>38400</System:String>
<System:String>19200</System:String>
<System:String>14400</System:String>
<System:String>9600</System:String>
<System:String>4800</System:String>
</ComboBox>
<ComboBox x:Name="ParityComboBox" HorizontalAlignment="Left" Height="17" Margin="308,86,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="Parity_SelectionChanged" IsEnabled="False" FontSize="9" FontFamily="Arial">
<System:String>Even</System:String>
<System:String>Mark</System:String>
<System:String>None</System:String>
<System:String>Odd</System:String>
<System:String>Space</System:String>
</ComboBox>
<ComboBox x:Name="DataBitsComboBox" HorizontalAlignment="Left" Height="17" Margin="115,125,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="DataBits_SelectionChanged" IsEnabled="False" FontSize="8" FontFamily="Arial">
<System:String>5</System:String>
<System:String>6</System:String>
<System:String>7</System:String>
<System:String>8</System:String>
</ComboBox>
<ComboBox x:Name="StopBitsComboBox" HorizontalAlignment="Left" Height="17" Margin="308,123,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="StopBits_SelectionChanged" IsEnabled="False" FontSize="10" FontFamily="Arial">
<System:String>One</System:String>
<System:String>Two</System:String>
<System:String>OnePointFive</System:String>
</ComboBox>
<Label Content="Baudrate :" HorizontalAlignment="Center" Margin="47,81,753,423" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="22" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10" FontStyle="Italic" Width="63"/>
<Label Content="Parity :" HorizontalAlignment="Center" Margin="234,81,573,423" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="22" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10" FontStyle="Italic" Width="56"/>
<Label Content="DataBits :" HorizontalAlignment="Center" Margin="48,123,753,382" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="22" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10" FontStyle="Italic" Width="62"/>
<Label Content="StopBit :" HorizontalAlignment="Center" Margin="238,123,567,382" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="22" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10" FontStyle="Italic" Width="58"/>
<Button x:Name="ConnectButton" Content="Connect" HorizontalAlignment="Left" Margin="308,20,0,0" VerticalAlignment="Top" Width="75" Click="ConnectButton_Click" IsEnabled="False" Height="14" FontSize="10" FontFamily="Arial"/>
<Label Content="ProtocolCustomWndow :" HorizontalAlignment="Left" Margin="21,172,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.546,3.143" FontSize="10" FontFamily="Arial"/>
<ComboBox x:Name="ProtocolTypeComboBox" HorizontalAlignment="Left" Height="14" Margin="141,177,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="ProtocolTypeComboBox_SelectionChanged" VerticalContentAlignment="Stretch" IsReadOnly="True" IsSynchronizedWithCurrentItem="True" FontSize="9" FontFamily="Arial" IsEnabled="False">
<System:String>WLink</System:String>
</ComboBox>
***<StatusBar HorizontalAlignment="Left" Height="28" Margin="0,396,0,0" VerticalAlignment="Top" Width="794">
<StatusBarItem FontSize="9" FontFamily="Arial" TextOptions.TextHintingMode="Fixed">
<TextBlock Name= "PortStatus"/>
</StatusBarItem>
</StatusBar>***
</Grid>
</Window>
Images of the correct and wrong pics are attached.
wrong position
Wrong Position
Correct position
Correct position
Try something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="PortNumber :" HorizontalAlignment="Center"/>
<ComboBox FontSize="9" FontFamily="Arial" Grid.Column="1">
<ComboBoxItem IsSelected="True">COM 3</ComboBoxItem>
</ComboBox>
<Button Content="Connect" Grid.Row="0" Grid.Column="3"></Button>
<TextBlock Text="PortSettings :" FontSize="10" FontFamily="Arial" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="Baudrate :" FontStyle="Italic" Grid.Row="2" HorizontalAlignment="Center"/>
<ComboBox IsEnabled="False" IsReadOnly="True" FontSize="9" FontFamily="Arial" Grid.Row="2" Grid.Column="1">
<System:String>115200</System:String>
<System:String>57600</System:String>
<System:String>38400</System:String>
<System:String>19200</System:String>
<System:String>14400</System:String>
<System:String>9600</System:String>
<System:String>4800</System:String>
</ComboBox>
<TextBlock Text="Parity :" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Center"/>
<ComboBox Grid.Row="2" Grid.Column="3"/>
</Grid>
Pay special attention to use of Grid.Row and Grid.Column, you will need to set the Horizontal Alignment on these elements but this will show you how to position things in WPF.
I have a XAML window that the layout is done using a main grid. The problem is when the browser is resized the controls in the second and third columns move to the right and the window's layout is no longer correct. I have pasted the XAML below. I think the layout of a WPF window should be grid based with all controls residing in the window's master grid. Is this the proper layout design for WPF or is there a different recommended layout pattern?
<Window x:Class="MasterPage.Intake1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:v="clr-namespace:MasterPage.View"
Title="Intake 1" Height="900" Width="1000" Background="#FFD9DDE8" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="190*"/>
<RowDefinition Height="275*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*"/>
<ColumnDefinition Width="300*"/>
<ColumnDefinition Width="250*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0">
<Image Source="Images\header.jpg" Height="47" Margin="0,0,0,0" />
</StackPanel>
<StackPanel HorizontalAlignment="Left" Grid.Column="0" Height="80" Width="350" Grid.ColumnSpan="1" Grid.Row="1" Margin="0,-23,0,0">
<Image Source="Images\DSPASS_logo.png" Stretch="Fill" DockPanel.Dock="Top" Height="70" />
</StackPanel>
<StackPanel Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="1" Margin="0,0,0,0">
<TextBlock FontSize="15" Margin="0,0,0,0" Height="25" Width="300" TextWrapping="WrapWithOverflow">
<Label FontSize="10" Name="Namelabel" Width="250" FontWeight="Bold" Foreground="#1664A1" Content="Welcome to DS PASS:"/>
</TextBlock>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="10,10,0,0" Height="290" Width="975" VerticalAlignment="Top" Grid.ColumnSpan="3" Grid.RowSpan="1">
<Label Height="36" FontSize="16" Content="Post Identification" Background="#FF014E7E" FontWeight="Bold" Foreground="White" Margin="-5,0,-18,0"/>
<StackPanel x:Name="_wordLength" Orientation="Horizontal" Margin="235,0,200,0">
<TextBlock Height="20" x:Name="ApplicantType_TextBlock" Text="Applicant Type" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="textBoxWordLength" Width="400" Margin="10,5"/>
</StackPanel>
<StackPanel x:Name="_integerWordLength" Orientation="Horizontal" Margin="235,0,200,0">
<TextBlock Height="20" x:Name="textBlockIntegerWordLength" Text="Person Type" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="textBoxIntegerWordLength" Width="400" Margin="10,5"/>
</StackPanel>
<StackPanel x:Name="_Post" Orientation="Horizontal" Margin="235,0,200,20">
<TextBlock Height="20" x:Name="Post_TextBlock" Text="Post" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="Post_TextBox" Width="400" Margin="10,5"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Height="130" Margin="15,-120,0,0" VerticalAlignment="Top" Grid.ColumnSpan="3" >
<Label Height="36" FontSize="16" Content="Applicant Employment" Background="#FF004A78" FontWeight="Bold" Foreground="White" Margin="-5,0,-18,0"/>
<StackPanel x:Name="_max1" Orientation="Vertical" Margin="1,0,355,0">
<TextBlock Height="20" x:Name="maxTextBlock1" Text="Employee ID" Width="100" Foreground="Black" Margin="0,15,459,5" TextAlignment="Right"/>
<TextBox Height="25" x:Name="maxTextBox1" Width="400" Margin="0,-5,90,25"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Left" Height="330" Margin="0,10,0,0" VerticalAlignment="Top" Width="965" Grid.RowSpan="2">
<Label Height="36" FontSize="16" Content="English Version of Name" Background="#FF005183" Grid.Row="4" FontWeight="Bold" Margin="10,10,0,0" Foreground="White" Padding="4,5,5,5"/>
<StackPanel x:Name="_LastName" Orientation="Vertical">
<TextBlock Height="20" x:Name="LastName_TextBlock" Text="Last Name/Surname" Margin="55,5,459,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="LastName_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
<StackPanel x:Name="_FirstName" Orientation="Vertical">
<TextBlock Height="20" x:Name="FirstName_TextBlock" Text="First Name" Margin="55,0,459,0" TextAlignment="Left"/>
<TextBox Height="25" x:Name="FirstName_TextBox" Width="500" Margin="55,0,459,0"/>
</StackPanel>
<StackPanel x:Name="_MiddleName" Orientation="Vertical">
<TextBlock Height="20" x:Name="MiddleName_TextBlock" Text="Middle Name" Margin="55,5,459,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="MiddleName_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
<StackPanel x:Name="_ExtendedName" Orientation="Vertical">
<TextBlock Height="20" x:Name="ExtendedName_TextBlock" Text="Extended name (Tribal, Jr., III, etc.)" Margin="55,5,372,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="Extended_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.RowSpan="4" Grid.Column="4" HorizontalAlignment="Left" Height="230" Margin="-250,400,0,0" Width="480" Grid.ColumnSpan="1">
<StackPanel x:Name="_Aliases" Orientation="Vertical" Margin="-15,0,0,0" Height="144">
<TextBlock Height="20" x:Name="Aliases_TextBlock" Text="Aliases" Margin="40,-5,0,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="Aliases_TextBox" Width="500" Margin="43,5"/>
<TextBox Height="25" x:Name="Aliases_TextBox1" Width="500" Margin="43,5"/>
<TextBox Height="25" x:Name="Aliases_TextBox2" Width="500" Margin="43,5"/>
</StackPanel>
</StackPanel>
<!--<Label HorizontalAlignment="Left" Margin="4,132,0,0" Grid.Row="3" VerticalAlignment="Top" Background="#FF72C772" Grid.ColumnSpan="3" Width="1242" Height="36"/>
<Button Content="Continue" Grid.Column="2" HorizontalAlignment="Left" Margin="16,139,0,0" Grid.Row="3" VerticalAlignment="Top" Width="125" Click="Page1_Continue_Click"/>
<Button Content="Save Draft" Grid.Column="1" HorizontalAlignment="Left" Margin="336,139,0,0" Grid.Row="3" VerticalAlignment="Top" Width="125"/>-->
<Label HorizontalAlignment="Left" Margin="4,400,0,0" Grid.Row="4" VerticalAlignment="Top" Background="#FF52BB52" Grid.ColumnSpan="3" Width="983" Height="36">
</Label>
<Button Content="Save Draft" Grid.Column="1" HorizontalAlignment="Left" Margin="150,408,0,0" Grid.Row="5" VerticalAlignment="Top" Width="125" />
<Button x:Name="ContinueButton_Page2" Content="Continue" Grid.Column="1" Width="125" Grid.Row="5" VerticalAlignment="Top" Margin="200,408,0,0" Grid.ColumnSpan="2" Click="btnContinue_Click"/>
</Grid>
</Window>
When you want control of the alignment during resizing, think Grid. In more complex situations, think Grids inside a Grid. A picture says it better
You have your MainGrid with only rows, no columns. The blue headers get rows of their own and
the orange containers are Grids themselves (with possibly a margin left and right).
Now you shouldn't try to divide the available space with all "...*" width values.
In this example you could use it for dead space only, e.g. the yellow columns with Width="*".
The blue columns would be Width="Auto" (or pixels).
Topping it off with a MinWidth for the Window corresponding with the width you need for the bottom Grid. Also consider wrapping your MainGrid in a ScrollViewer.
What I needed was to not allow resizing of the web browser. To do this I removed the minimize/maximize buttons To do that I used the following attribute:
ResizeMode="NoResize"
I am new with WPF please keep that in mind. I am trying to Make the Window Responsive to Resize, Is it possible that my controls such as textboxes and buttons are Resized as window grows or shrinks?
<Window x:Class="WPF_Working_Experimenet.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="216.586" Width="459.256">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="156*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Label Content="username :" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="66,27,0,0" Height="30" Width="63" FontFamily="B Nazanin" FontSize="15" Grid.Column="1"/>
<Label Content="password :" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="74,63,0,0" Height="30" Width="55" FontFamily="B Nazanin" FontSize="15" Grid.Column="1"/>
<Label x:Name="lblwrong" Content="" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,150,0,0" ClipToBounds="True" Grid.Column="1" Height="26" Width="275"/>
<Button x:Name="btnLogin" Content="Login" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Grid.Column="1" Margin="211,103,0,0" Height="37" Background="White" Click="btnLogin_Click" BorderBrush="Red" FontFamily="B Nazanin" FontSize="15"/>
<Image HorizontalAlignment="Left" Height="117" Margin="4,23,0,0" VerticalAlignment="Top" Width="178" Source="img/Ticket_5523675581838074942.png" Grid.ColumnSpan="2" RenderTransformOrigin="0.5,0.128"/>
<Button x:Name="btnExit" Content="Exit" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Grid.Column="1" Margin="146,103,0,0" Height="37" Background="#FFFDFDFD" BorderBrush="Red" Click="Button_btnExit" FontFamily="B Nazanin" FontSize="15"/>
<TextBox x:Name="txtUsername" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="125" Grid.Column="1" Margin="146,34,0,0" BorderBrush="#FFF7311E"/>
<PasswordBox x:Name="txtPassword" Grid.Column="1" HorizontalAlignment="Left" Margin="146,70,0,0" VerticalAlignment="Top" Width="125" Height="23" BorderBrush="#FFFD3306"/>
</Grid>
</Window>
Any Reference/hint or Tutorial/link would be lovely. thank you in advance
You have to set Margin / Padding instead of explicit Width / Height if you want your controls to grow / shrink.
Few links to help you :
Layout with Absolute and Dynamic Positioning
How to make all controls resize accordingly proportionally when window is maximized?
Controls do not resize if you set their Width and Height properties explicitly. Try the following, I removed the Width and Height properties and changed the HorizontalAlignment and VerticalAlignment values to Stretch.
<Window x:Class="WPF_Working_Experimenet.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="216.586" Width="459.256">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="156*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Label Content="username :"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="B Nazanin"
FontSize="15"
Grid.Column="1"/>
<Label Content="password :"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="B Nazanin"
FontSize="15"
rid.Column="1"/>
<Label x:Name="lblwrong"
Content=""
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="True"
Grid.Column="1"/>
<Button x:Name="btnLogin"
Content="Login"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="White"
Click="btnLogin_Click"
BorderBrush="Red"
FontFamily="B Nazanin"
FontSize="15"/>
<Image HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="img/Ticket_5523675581838074942.png"
Grid.ColumnSpan="2"
RenderTransformOrigin="0.5,0.128"/>
<Button x:Name="btnExit"
Content="Exit"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="#FFFDFDFD"
BorderBrush="Red"
Click="Button_btnExit"
FontFamily="B Nazanin"
FontSize="15"/>
<TextBox x:Name="txtUsername"
HorizontalAlignment="Stretch"
TextWrapping="Wrap"
VerticalAlignment="Stretch"
Grid.Column="1"
BorderBrush="#FFF7311E"/>
<PasswordBox x:Name="txtPassword"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="#FFFD3306"/>
</Grid>
</Window>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="View/Images/LoginImg.jpg" Stretch="Fill" Grid.Column="0" Grid.ColumnSpan="3">
<Image.Effect>
<BlurEffect Radius="8"/>
</Image.Effect>
</Image>
<TextBox Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Foreground="White" HorizontalAlignment="Center"
Height="78" Margin="122,10,45.6,0" TextWrapping="Wrap" Text="Library Management System " VerticalAlignment="Top" Width="594" FontSize="40" FontWeight="Bold" FontStyle="Normal">
<TextBox.VerticalContentAlignment>Center</TextBox.VerticalContentAlignment>
<TextBox.IsReadOnly>True</TextBox.IsReadOnly>
</TextBox>
<Canvas Grid.Column="1" HorizontalAlignment="Stretch" Width="auto" Height="300" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" Background="White">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0.627"/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Label Content="Login" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Background="BurlyWood" FontSize="15" Height="52" Width="254">
<Label.FontWeight>Bold</Label.FontWeight>
</Label>
<TextBox Height="24" Canvas.Left="20" TextWrapping="Wrap" Text="User Name" TextAlignment="Center" Canvas.Top="84" Width="120" Foreground="Gray"/>
<PasswordBox Canvas.Left="20" Canvas.Top="136" Height="34" Width="120"/>
</Canvas>
</Grid>
Setting the horizontal and vertical alignment to stretch instead of setting width and height of the widget will do the trick. But still you can set a margin if you want. Tried this out and it ensured that when the window size is changed the widget will adjust respectively.
I've set up binding of a double value to an AngularBlockBar control. There are two gauges in the layout, but the AngularBlockBar which is over layed on top of the AngularGauge doesn't show its binding value updating on screen, although valid binding values are being updated to it.
To debug this, I've checked first that the binding value that is bound to the AngularBlockBar is valid and this shows as true by setting a break point.
The binding value shows as valid.
I'm thinking its because of the way the two gauges are over layed over each other, which causes the AngularBlockBar's binding to not show.
Does anyone know what the issue could be here, that prevents the AngularblockBar's binding from being shown on screen?
The layout below is the main user control of the application where the two gauges are over layed. The first gauge updates correctly with a white fill value as shown in the screen shot below. But the AngularBlockBar which has a blue fill value isn't updated
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:gauges="http://gu.se/Gauges"
xmlns:local="clr-namespace:MyoTestv4"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="MyoTestv4.AdductionAbductionFlexionView"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Viewbox>
<Grid HorizontalAlignment="Left" Height="280" Margin="10,10,0,0" VerticalAlignment="Top" Width="280">
<TextBox HorizontalAlignment="Left" x:Name="statusTbx" Background="#141c28" Foreground="White" BorderBrush="#141c28" Height="30" Margin="0,3,0,0" TextWrapping="Wrap" Text="{Binding CurrentStatus}" VerticalAlignment="Top" Width="75"/>
<TextBox HorizontalAlignment="Left" x:Name="poseStatusTbx" Background="#141c28" Foreground="White" BorderBrush="#141c28" Height="39" Margin="80,4,0,0" TextWrapping="Wrap" Text="{Binding PoseStatus}" VerticalAlignment="Top" Width="75"/>
<TextBox HorizontalAlignment="Left" x:Name="degreeOfAbductionTbx" Background="#141c28" Foreground="White" Height="22" Margin="0,246,0,0" TextWrapping="Wrap" Text="{Binding DegreeStatus}" VerticalAlignment="Top" Width="47"/>
<Label Content="Arc start:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,186,0,0" VerticalAlignment="Top" Width="57"/>
<Image HorizontalAlignment="Left" Source="pack://application:,,,/Images/abduction_side_trans.png" x:Name="exerciseImage" Height="100" Margin="0,33,0,0" VerticalAlignment="Top" Width="100"/>
<TextBox HorizontalAlignment="Left" x:Name="painfulArcEndTbx" Background="#141c28" Foreground="White" Height="22" Margin="62,217,0,0" TextWrapping="Wrap" Text="{Binding EndDegreeStatus}" VerticalAlignment="Top" Width="48"/>
<Label Content="Arc end:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,217,0,0" VerticalAlignment="Top" Width="57"/>
<TextBox HorizontalAlignment="Left" x:Name="painfulArcStartTbx" Background="#141c28" Foreground="White" Height="23" Margin="62,189,0,0" TextWrapping="Wrap" Text="{Binding StartDegreeStatus}" VerticalAlignment="Top" Width="48"/>
<Grid>
<gauges:AngularGauge
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
IsDirectionReversed="False"
MajorTickFrequency="8"
FontSize="10"
MajorTicks="10"
MaxAngle="0"
Maximum="180"
MinAngle="-180"
Minimum="0"
Style="{StaticResource FatAngular}"
MinorTickFrequency="4"
Value="{Binding DegreeStatus}" Margin="149,2,-89,2" RenderTransformOrigin="0.5,0.5" Height="Auto" Width="Auto"
>
<gauges:AngularGauge.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-89.642"/>
<TranslateTransform/>
</TransformGroup>
</gauges:AngularGauge.RenderTransform>
</gauges:AngularGauge>
<gauges:AngularBlockBar
MaxAngle="180"
Maximum="1"
MinAngle="0"
Minimum="0"
Opacity="0.2"
ReservedSpace="50"
Margin="149,2,-96,0"
TickLength="55"
Fill="DodgerBlue"
Value="{Binding PainfulArcStatus}"
RenderTransformOrigin="0.5,0.5" >
<gauges:AngularBlockBar.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90.711"/>
<TranslateTransform/>
</TransformGroup>
</gauges:AngularBlockBar.RenderTransform>
</gauges:AngularBlockBar>
</Grid>
<TextBlock HorizontalAlignment="Left" x:Name="repCntTblk" Margin="80,43,0,0" TextWrapping="Wrap" Text="" FontSize="38" Foreground="#00bdde" VerticalAlignment="Top" Width="34" Height="41"/>
<Button Content="Submit" x:Name="submitBtn" Command="{Binding Path=DataSubmitCommand}" IsDefault="True" IsCancel="True" HorizontalAlignment="Left" Background="#00bdde" Foreground="White" Margin="0,148,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.76,5.093"/>
</Grid>
</Viewbox>
</UserControl>
The first gauge binding being shown, but the over layed value for the block bar isn't shown.
Don't you need to define Grid.Column and/or Grid.Row on your guage and blockbar other wise they will just lay ontop of eachother?
example with Grid.ColumnDefinitions, you probably want RowDefinitions
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100px"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ComboBox ItemsSource="{Binding NavigationItems}" SelectedItem="{Binding SelectedNavigationItem, Mode=TwoWay}" Grid.Row="0" Grid.Column="0">
</ComboBox>
<ContentControl Content="{Binding SelectedNavigationItem}" Grid.Row="0" Grid.Column="1"/>
</Grid>
I want to stretch the Groupbox of this window (height). I am not able to get it working. What am I doing wrong?
What I want is that the groupbox stretches to the height of the window, but that the first column doesn't stretch.
<!-- PLAYER A -->
<Border Grid.Row="0" Grid.Column="0" x:Name="PlayerA" Height="145" VerticalAlignment="Center">
<Grid Height="145" VerticalAlignment="Top">
<GroupBox x:Name="grpPlayerA" Header="Player A" Margin="10,14,0,0" RenderTransformOrigin="0.035,-0.717" Height="127" VerticalAlignment="Top">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Label x:Name="lblArtistA" Content="VENGABOYS" HorizontalAlignment="Left" Margin="3,3,0,0" VerticalAlignment="Top"/>
<Label x:Name="lblTitleA" Content="TO BRAZIL" HorizontalAlignment="Left" Margin="3,27,0,0" VerticalAlignment="Top"/>
<ProgressBar x:Name="prgPlayerA" HorizontalAlignment="Left" Height="15" Margin="5,53,0,0" VerticalAlignment="Top" Width="212"/>
<Image x:Name="imgPlayerA" HorizontalAlignment="Left" Height="62" Margin="220,6,0,0" VerticalAlignment="Top" Width="81"/>
<Button x:Name="btnPlayerAPlay" Content="Play" HorizontalAlignment="Left" Margin="5,79,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btnPlayerAPauze" Content="Pauze" HorizontalAlignment="Left" Margin="92,79,0,0" VerticalAlignment="Top" Width="74"/>
<Button x:Name="btnPlayerAStop" Content="Stop" HorizontalAlignment="Left" Margin="178,79,0,0" VerticalAlignment="Top" Width="76"/>
</Grid>
</GroupBox>
</Grid>
</Border>
<!-- PLAYER B-->
<Border Grid.Row="0" Grid.Column="1" x:Name="PlayerB">
<GroupBox x:Name="grpPlayerB" Header="Player B" Margin="0,14,16,0" Height="127" VerticalAlignment="Top">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Label x:Name="lblArtistB" Content="VENGABOYS" HorizontalAlignment="Left" Margin="3,3,0,0" VerticalAlignment="Top"/>
<Label x:Name="lblTitleB" Content="TO BRAZIL" HorizontalAlignment="Left" Margin="3,27,0,0" VerticalAlignment="Top"/>
<ProgressBar x:Name="prgPlayerB" HorizontalAlignment="Left" Height="15" Margin="5,53,0,0" VerticalAlignment="Top" Width="212"/>
<Image x:Name="imgPlayerB" HorizontalAlignment="Left" Height="62" Margin="220,6,0,0" VerticalAlignment="Top" Width="81"/>
<Button x:Name="btnPlayerBPlay" Content="Play" HorizontalAlignment="Left" Margin="5,79,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btnPlayerBPauze" Content="Pauze" HorizontalAlignment="Left" Margin="92,79,0,0" VerticalAlignment="Top" Width="74"/>
<Button x:Name="btnPlayerBStop" Content="Stop" HorizontalAlignment="Left" Margin="178,79,0,0" VerticalAlignment="Top" Width="76"/>
</Grid>
</GroupBox>
</Border>
<!-- HITLIJST -->
<Border Grid.Row="1" Grid.Column="0" x:Name="Hitlijst" VerticalAlignment="Top" Margin="0,0,0,28">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="0*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<GroupBox x:Name="grpPlaylist" Header="Hitlijst" Margin="10,0" Grid.RowSpan="2" Height="275">
<Grid VerticalAlignment="Top">
<ListBox x:Name="lbxHitlijst" Height="242" Margin="10,10,10,0" VerticalAlignment="Top">
<ListBoxItem Background="#FFF55F19" Content="1. Vengaboys - To Brazil (3:19)"/>
<ListBoxItem Background="#FFF91A1A" Content="2. Total Touch - Doo Be La Dee (3:60)"/>
<ListBoxItem Content="3. ATB - 9 PM Till I Come (3:33)"/>
</ListBox>
</Grid>
</GroupBox>
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="1" x:Name="Info">
<Grid>
<GroupBox x:Name="grpInfo" Header="Info" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Height="282" Width="324">
<Grid>
<TextBlock x:Name="txtLyrics" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Lyrics" VerticalAlignment="Top" Height="119" Width="292"/>
<GroupBox x:Name="grpInfoInfo" Header="Gegevens" HorizontalAlignment="Left" Margin="10,134,0,0" VerticalAlignment="Top" Height="116" Width="292">
<Grid>
<Label x:Name="lblAlbum" Content="ALBUM: Hitzone 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.149,0.231"/>
<Label x:Name="lblYear" Content="JAAR: 1992" HorizontalAlignment="Left" Margin="10,36,0,0" VerticalAlignment="Top" RenderTransformOrigin="0,0.269"/>
<Label x:Name="lblArtists" Content="ARTIEST(EN): Vengaboys" HorizontalAlignment="Left" Margin="10,62,0,0" VerticalAlignment="Top"/>
</Grid>
</GroupBox>
</Grid>
</GroupBox>
</Grid>
</Border>
<GroupBox x:Name="grpHitlijst" Header="Hitlijst --" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="0,0,10,10"/>
</Grid>
It would be great to get it working, thanks in advance!
If you want the GroupBox to stretch in height, why is your VerticalAlignment Top? Switch it to Stretch and it should work.
Please refer to this note:
WPF Groupbox height needs to change dynamically?
bottom line - set width and height to "Auto" (delete the values that they have),
and set the VerticalAlignment / Horizontal one if you need it too to "Stretch"