I've noticed that the last items in my list box don't scroll up freely. They almost "bounce" when I try to move them up. The effect is even worse when I have the SIP active. I can't scroll the bottom items up the screen. They stay on the bottom of the screen and I can't see them (or they are partially blocked).
Any ideas on how to correct this situation?
<ListBox VerticalAlignment="Top">
<Grid>
<TextBox Height="72" Margin="109,10,0,0" HorizontalAlignment="Left" Name="txt1" Text="" VerticalAlignment="Top" TextWrapping="Wrap" Width="341" InputScope="Text"/>
<TextBox Height="72" Margin="109,70,267,0" HorizontalAlignment="Left" Name="txt2" Text="0" VerticalAlignment="Top" Width="80" InputScope="Number" />
<TextBox Height="72" Margin="0,70,73,0" HorizontalAlignment="Right" Name="txt3" Text="0" VerticalAlignment="Top" Width="80" InputScope="Number"/>
<TextBox Height="131" Margin="12,160,0,0" HorizontalAlignment="Left" Name="txt4" Text="" VerticalAlignment="Top" TextWrapping="Wrap" Width="438" InputScope="Text"/>
<TextBox Height="72" Margin="12,320,0,147" HorizontalAlignment="Left" Name="txt5" Text="" VerticalAlignment="Top" Width="438" InputScope="Text"/>
<TextBlock Height="30" Margin="47,30,333,0" Name="lbl1" Text="Dosage" VerticalAlignment="Top" />
<TextBlock Height="30" Margin="10,90,332,0" Name="lbl2" Text="Quantity" VerticalAlignment="Top" />
<TextBlock Height="30" Margin="0,90,142,0" Name="lbl3" Text="Refills" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<TextBlock Height="37" Margin="24,135,212,0" Name="lbl4" Text="Additional Instructions" VerticalAlignment="Top" />
<TextBlock Height="30" Margin="24,293,0,0" Name="lbl5" Text="Reason for Taking" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="30" Margin="24,385,0,0" Name="lbl6" Text="Consumption Frequency:" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="27,417,0,0" Name="lblday1" Text="Sun" VerticalAlignment="Top" Width="37" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="83,417,0,0" Name="lblday2" Text="Mon" VerticalAlignment="Top" Width="46" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Right" Margin="0,417,272,0" Name="lblday3" Text="Tue" VerticalAlignment="Top" Width="37" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="203,417,0,0" Name="lblday4" Text="Wed" VerticalAlignment="Top" Width="46" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="263,417,0,0" Name="lblday5" Text="Thur" VerticalAlignment="Top" Width="46" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="329,417,0,0" Name="lblday6" Text="Fri" VerticalAlignment="Top" Width="37" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="388,417,0,0" Name="lblday7" Text="Sat" VerticalAlignment="Top" Width="37" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="15,431,0,0" Name="chkSun" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="75,431,0,0" Name="chkMon" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="135,431,0,0" Name="chkTue" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Right" Margin="0,431,202,0" Name="chkWed" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="255,431,0,0" Name="chkThu" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="315,431,0,0" Name="chkFri" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="375,431,0,0" Name="chkSat" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
</Grid>
</ListBox>
UPDATE:
OK, I sort of answered my own question. At least I found an initial answer to my own question. What I did to correct the bouncing is to modify the height property in the .
<Grid Height="800">
Now when the SIP is active the bottom items are visible with plenty of room to spare.
As I said above, I found an answer. I don't know if it was the right answer. If you have a better way, please let me know.
When I was testing this, yes, when the SIP is active I can initially move freely to the bottom. However, when I move try to move back up I get the bounce effect again. Is there something that I need to add to allow it to move freely up and down?
The problem in general is that the Listbox doesn't know how tall it is. You can solve it by setting an explicit height on it's parent, sure. A better way to do it would be to define a row for it in the grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox Grid.Row="0">
...
</ListBox>
</Grid>
The Height="*" says the row should take the entire space of it's container.
OK, I answered my own question. At least I found an answer to my own question. What I did to correct the bouncing is to modify the height property in the .
<Grid Height="800">
Now when the SIP is active the bottom items are visible with plenty of room to spare.
As I said above, I found an answer. I don't know if it was the right answer. If you have a better way, please let me know.
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 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.
I am currently sitting on a Silverlight-Listbox and have some
trouble getting my listBox right.
Its (visually) starts from the second item.
I have to scroll up to see the first one.
Why is this happening and how could I fix this?
<ListBox x:Name="ServingsList"
Foreground="White"
Background="#FFB88A8A"
SelectionChanged="servingSelected"
Margin="0,0,0,297">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="70" Width="432">
<Rectangle x:Name="Linie"
Fill="#FF8D8D8D"
HorizontalAlignment="Right"
Height="2"
StrokeThickness="0"
VerticalAlignment="Top"
Width="380"
Margin="0,-30,0,0" />
<TextBlock x:Name="ServingTitel"
TextWrapping="Wrap"
Text="{Binding name}"
FontSize="21.333"
Margin="50,-60,0,0" />
<Image x:Name="Ribbon"
HorizontalAlignment="Right"
Height="30"
VerticalAlignment="Top"
Width="151"
Source="/TEX/GrayRibbon.png"
Stretch="UniformToFill"
Margin="0,-60,0,0" />
<TextBlock x:Name="Kcal"
TextWrapping="Wrap"
Text="{Binding kalorien]}"
FontSize="18.667"
Height="23"
Margin="0,-92,8,0"
TextAlignment="Right" />
<Button Content="1"
Width="55" Height="55"
BorderThickness="3"
FontSize="18.667"
Padding="-1,-2,0,0"
Margin="-400,-87,0,0"
FontWeight="Bold"
Click="servingButtonClicked" />
</StackPanel>
</DataTemplate>
</ListBox>
You need to check your Margin values - in the main list you're putting 297 pixels of whitespace below your list box. Other elements have weird values too. Expression Blend sometimes messes with the Margins if you change from a StackPanel to a Grid.
e.g:
Margin="0,0,0,297">
So, it is my first time working with a wpf application in VS 2012 for windows desktop.
I put some background image in to a window. I put three text boxes and a button on to that window. Now I have a problem, when I start the application and I change the size of a window with mouse or go fullscreen, the window changes its size, but textboxes and button stay at the same position as before, and they do not really fit into that design. I hope I was clear enough. Thank you for your help.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="768" Width="1366
">
<Grid RenderTransformOrigin="0.495,0.498" Margin="0,10,0,0">
<Grid.Background>
<ImageBrush ImageSource="slike/education_board.jpg"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="209" Margin="209,211,0,0" VerticalAlignment="Top" Width="396">
<TextBox x:Name="tockeMaturaTextBox" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" Margin="10,0,0,176"/>
<TextBox x:Name="tretjiLetnikTextBox" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" RenderTransformOrigin="0.899,3.574" Margin="10,63,0,0"/>
<TextBox x:Name="cetrtiLetnikTextBox" HorizontalAlignment="Left" Height="23" Margin="10,115,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="361,224,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<TextBlock x:Name="skupneTockeTextBlock" HorizontalAlignment="Left" Margin="323,133,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" RenderTransformOrigin="-0.375,0.338" Height="73" Width="113"/>
</Grid>
</Grid>
</Window>
Give the XAML below a try:
<Grid Margin="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="211"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="slike/education_board.jpg"/>
</Grid.Background>
<StackPanel Grid.Row="1" Grid.Column="1" >
<TextBox x:Name="tockeMaturaTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" />
<TextBox x:Name="tretjiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" />
<TextBox x:Name="cetrtiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Button x:Name="button" Margin="5" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<TextBlock x:Name="skupneTockeTextBlock" Margin="5" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="73" Width="113"/>
</StackPanel>
</Grid>
WPF uses a container-based (relative) layout system. You were placing your textboxes in absolute positions by defining their margins precisely with respect to the parent grid. In the example above, they are placed in a StackPanel which is inside the grid.
With all the extra margins and absolute widths and heights, it's hard to tell what final result you are going for, but the XMAL above should get you close. You can change the relative sizes of the grid rows and columns to get what you need; or completely redefine the structure of the Grid.
I think a good tutorial on WPF is in order to get a handle on the basic conocepts:
Silverlight/WPF Introduction. This is geared a little bit towards Silverlight, but the layout principles are identical to WPF. Actual training starts at 8:17 in the video.
EDIT
For magical expanding and shrinking content, use the code below:
<Grid Margin="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="slike/education_board.jpg"/>
</Grid.Background>
<Viewbox Grid.Row="1" Grid.Column="1" >
<StackPanel>
<TextBox x:Name="tockeMaturaTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" />
<TextBox x:Name="tretjiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" />
<TextBox x:Name="cetrtiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Button x:Name="button" Margin="5" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<TextBlock x:Name="skupneTockeTextBlock" Margin="5" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="73" Width="113"/>
</StackPanel>
</Viewbox>
</Grid>