So here's my problem, when I expand the main window the pages presenter frame seems to expand too but only horizontaly. (see photo #1) The 5 buttons on the bottom stay at the original resolution position verticaly but expand horizontaly, I've put them between stars related columns and rows. It worked well for my wlecome pages an this methos seems to work horizontaly. I'm wonderind if the problem comes from previoulsy setuped proprieties. Problem is related to fifthline but can be post problems.
Images
====================================
Original size see 2 border buttons
Expanded window
Grid setup
Expand working on homepage *Grid setup
====================================
<Border Padding="1">
<StackPanel>
<!---FirstLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="445"/>
<ColumnDefinition Width="365"/>
<ColumnDefinition Width="390"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<TextBlock Text="Prénom" Margin="30,5,165,0" Grid.Column="0" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxPrenom" Text="Jean" Margin="100,-1,5,1" Padding="0,5" FontSize="12"/>
<TextBlock Text="Nom" Margin="5,4,245,1" Grid.Column="1" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxNom" Text="Dujardins" Margin="60,-1,0,1" Grid.Column="1" Padding="0,5"/>
</Grid>
<!---SecondLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="433"/>
<ColumnDefinition Width="472"/>
<ColumnDefinition Width="275"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46"/>
</Grid.RowDefinitions>
<TextBlock Text="Ville" Margin="30,20,0,0" Grid.Column="0" FontWeight="Black"/>
<ComboBox Name="ClientPage_ComboVille" Margin="100,20,0,0" Padding="0,5" FontSize="12"/>
<CheckBox Name="ClientPage_CehckResponsable" Content="Responsable" Margin="10,25,361,0" Grid.Column="1" FontWeight="Medium"/>
</Grid>
<!---ThirdLine-->
<Grid Height="79">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="393"/>
<ColumnDefinition Width="787"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="74"/>
</Grid.RowDefinitions>
<TextBlock Text="Membre depuis:" Margin="30,50,0,0" Grid.Column="0"/>
<DatePicker Name="ClientPage_DatepickDatedebut" Text="Membre depuis:" Margin="130,50,770,0" Grid.ColumnSpan="2"/>
</Grid>
<!---FourthLine-->
<Grid Height="191">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="217"/>
<ColumnDefinition Width="373"/>
<ColumnDefinition Width="590"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="191"/>
</Grid.RowDefinitions>
<GroupBox Name="ClientPage_GroupExp" Header="Années d'expériences" Margin="14,12,6,8" Grid.Column="0">
<StackPanel Margin="0,0,-2,0">
<RadioButton Content="Moins d'un an" Margin="50,10,0,10"/>
<RadioButton Content="1 à 4 ans" Margin="50,10,0,10"/>
<RadioButton Content="5 à 9 ans" Margin="50,10,0,10"/>
<RadioButton Content="10 ans et plus" Margin="50,10,0,10"/>
</StackPanel>
</GroupBox>
<ListBox Name="ClientPage_List" Margin="26,22,144,8" Grid.Column="1"/>
<Button x:Name="ClientPage_Buttonnouveau_Copy1" Content="OriginalFrame
Top right" Grid.Column="2" Margin="471,-150,-1,287" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<Button x:Name="ClientPage_Buttonnouveau_Copy" Content="OriginalFrame
Bottom Left" Margin="3,617,94,-480" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<!---FifthLine-->
</Grid>
<Grid Height="484">
<Grid.RowDefinitions>
<RowDefinition Height="149*"/>
<RowDefinition Height="227*"/>
<RowDefinition Height="45"/>
<RowDefinition Height="63*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="433*"/>
<ColumnDefinition Width="251*"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button x:Name="ClientPage_Buttoneffacer" Content="Effacer" Grid.Row="2" Grid.Column="0" Margin="0,0,2,4" IsEnabled="False"/>
<Button x:Name="ClientPage_Buttonprecedent" Content="<--" Grid.Row="2" Grid.Column="3" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonesuivant" Content="-->" Grid.Row="2" Grid.Column="4" Margin="0,0,1,4" />
<Button x:Name="ClientPage_Buttonajouter" Content="Ajouter" Grid.Row="2" Grid.Column="6" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonnouveau" Content="Nouveau" Grid.Row="2" Grid.Column="7" Margin="0,0,0,4" />
</Grid>
</StackPanel>
</Border>
The main problem you have is that you're using a StackPanel for your root layout panel. This is preventing your layout from expanding vertically.
You might want to consider using a Grid or a DockPanel instead.
I want to put several graphs in one WPF window using OXYplot library, so there will be some WPF components (like buttons) and some rectangles with graphs. It there a way to do it? In all examples the OXYplot graph occupies the whole WPF window.
I tried to put it inside a rectangle like this, but got an error "The type 'Rectangle' does not support direct content"
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="932,547,0,0" Stroke="Black" VerticalAlignment="Top" Width="100">
<oxy:PlotView Model="{Binding Model}"/>
</Rectangle>
Put it in a Panel or decorate it with a a Border:
<Border Background="Yellow" BorderBrush="Black" BorderThickness="1" Padding="10">
<oxy:PlotView Model="{Binding Model}"/>
</Border>
A PlotView is just a custom Control that you can use in your layout as you would use any other control in WPF.
To keep it simple, you could use Grid as well, to arrange multiple PlotView and buttons in desired layout.
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel1}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel2}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel3}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel4}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
</Grid>
I have a grid in my WPF application. This grid has two columns and one row.
Now, I am trying to align the first column content to the right and second column content to the left as below:
-----------------------------------------------------
| ProgressControlSpinner|"Loading..."|
-----------------------------------------------------
Instead I obtain:
-----------------------------------------------------
|ProgressControlSpinner|"Loading..." |
-----------------------------------------------------
Note that I want second column to be auto adjusted to the text width.
Also this grid should expand to the outer grid column in which it is contained.
My grid is as below:
<Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
<TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
</Grid>
Note: This grid is contained within another outer grid.
I have solved. My problem was in the outer grid when defining the width for the column where inner grid was contained.
I had:
<Grid Grid.Column="0" Grid.Row="0" Margin="10 10 10 5" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
<TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
</Grid>
</Grid>
and the correct is:
<Grid Grid.Column="0" Grid.Row="0" Margin="10 10 10 5" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
<TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
</Grid>
</Grid>
I was creating a simple interface for my app. All went well when I prepared the GUI design, I'm using WPF and its XAML implementations. Problem came up after everything compiled very well and the app's running. There's this one button that goes misaligned when the app's running. I looked for the problem and found nothing. Any idea on how to fix this?
Expected result is on the left, the real result is on floating window. The XAML code of the misaligned button is below the floating window.
<Window x:Class="WPFAlignment.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="3"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3"/>
</Style>
</Grid.Resources>
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="LoadFingerPrint"/>
<Button Grid.Column="1" Content="Load File"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="File Path:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="1"
Text="Key Size:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="2"
Text="Initial Vector:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<DockPanel LastChildFill="True" Grid.Column="1" Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
<Grid Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="1"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Content="128bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="1"
Content="192bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="2"
Content="256bit"
VerticalAlignment="Center"
HorizontalAlignment="Right"/>
</Grid>
<DockPanel LastChildFill="True"
Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Encrypt"/>
<Button Grid.Column="1"
Content="Decrypt"/>
<Button Grid.Column="2"
Content="Abort"/>
</Grid>
</Grid>
</Grid>
Can you try this and see the alignment? You have all those margins set by hand there.. i think that's the issue.
Basically, for positioning use containers : Grid, DockPanel, StackPanel and so on and to be relative inside them, use Alignments as in the example, VerticalAlignment.
Also, in order to set some common value for many Controls use Styles, like i did with the Margin of the Button.
I'm trying to create a sizable column that contains also horizontal gridsplitter.
The code is XAML for WPF:
<DockPanel Name="dockPanel1" LastChildFill="True" >
<Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="2" Background="#FFBCBCBC"/>
<DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
<Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Stretch"
Grid.Row="1" Grid.ColumnSpan="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="D2Row0" Grid.Row="0" />
<!-- separator at Row1 -->
<Label Content="D2Row2" Grid.Row="2" />
</Grid>
</DockPanel>
</Grid>
</DockPanel>
I can create one of them separate. But I want both.
To make more grids in a form, I use the dockpanel. Maybe this isn't necessary, but if I don't it generates errors.
Where do I go wrong? Anyone has a clue?
Try this :
<DockPanel Name="dockPanel1" LastChildFill="True" >
<Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="2" Background="#FFBCBCBC"/>
<DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
<Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="1" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FFBCBCBC" Height="2"/>
<Label Content="D2Row0" Grid.Row="0" />
<!-- separator at Row1 -->
<Label Content="D2Row2" Grid.Row="2" />
</Grid>
</DockPanel>
</Grid>
</DockPanel>