I use the following code in my WPF app, for a groupbox:
<GroupBox Style="{StaticResource groupBoxStyle}" Header="RB" Margin="0,6,268,249" Name="groupBoxRB" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="276">
This control is within a grid, that is defined like this:
<TabControl Grid.Row="1" Margin="4,12,0,12" Name="tabControl1" Background="Transparent">
<TabItem Style="{StaticResource tabItemMainStyle}" Header="Main" Name="tabItemMain" >
<Grid Background="Transparent" MinHeight="926" MinWidth="1218">
And that tabcontrol is within the main grid:
<Window x:Class="SRM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
xmlns:local="clr-namespace:SRM" ResizeMode="CanResize"
Title="SRM"
Width="991" Icon="Resources\Icons\SRM.png"
WindowStartupLocation="CenterScreen" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="1024" Height="774" Visibility="Visible" Foreground="#00000000" Margin="0">
<Grid Style="{StaticResource styleBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5" />
</Grid.ColumnDefinitions>
I don't understand why the groupbox i mentioned won't stretch on its vertical axis... any idea?
Thanks.
PS: the staticresources don't define heights/widths/alignments
My problem came from the designers (vs2010's or blend's) that by default put margins if you place controls manually in them... setting the Margin to 0 solved the problem:
<GroupBox Style="{StaticResource groupBoxStyle}" Header="RB" Margin="0" Name="groupBoxRB" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="276">
I think you're missing something in your styles or something. I just made the following from your code and stretching works fine in standalone app.
<Window x:Class="WpfApplication1.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.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5" />
</Grid.ColumnDefinitions>
<TabControl Grid.Row="1" Margin="4,12,0,12" Name="tabControl1" Background="Transparent">
<TabItem Header="Main" Name="tabItemMain" >
<Grid Background="Transparent" MinHeight="200" MinWidth="200">
<GroupBox Header="RB" Name="groupBoxRB" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="276">
<Rectangle Fill="Orange" />
</GroupBox>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
Related
I'm learning about WPF and I'm creating a window in XAML.
The window should look like this:
But when I run the program it looks like this:
The code is the following:
<Page x:Class="WpfApp1.ProductsManagement"
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:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="ProductsManagement">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="420" />
</Grid.RowDefinitions>
<TextBlock
Margin="5"
Text="Search"
Grid.Row="0"
Grid.Column="0"/>
<TextBox
Margin="5"
Grid.ColumnSpan="2"
Grid.Column="1"
Background ="White"
Grid.Row="0"
Text="hi"/>
<DataGrid
Margin ="5"
Name="dataGrid"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1"/>
<Border
Margin ="5"
Grid.Row="1"
Grid.Column="2"/>
</Grid>
</Page>
Any comments or suggestions are welcome.
UPDATE
I'm taking the following code as an example:
<Page x:Class="WpfApp1.Discussion"
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:data="clr-namespace:BikeShop"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="Discussion">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<ListBox
Grid.ColumnSpan="2"
Margin="5"/>
<Button
Grid.Row="1"
Grid.Column="1"
Margin="5"
Content="Send" />
<TextBox
Grid.Row="1"
Margin="5"
Text="Type your message here" />
</Grid>
</Page>
And when I run the code it looks like this: (It works correctly)
Your RowDefinitions must be like this:
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Right now you ask to fill the entire page for the first row and set the second row to a height of 420.
You must define a specific value for the first and * for the second.
You do not see the error in the designer because you set the second row to 420. Obviously you see the first row at 30. But when you go to fullscreen, the first row gets bigger.
Because your Row heights are incorrect. replace your RawDefinitions with:
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
In a WPF Prism app, I have two separate views in two separate regions, say LeftRegion and RightRegion. I would like to be able to drag the edge of LeftRegion (ie. the view in LeftRegion) like a gridsplitter works. Any ideas on how to accomplish this? Thank you.
EDIT: Here is the ShellView.xaml called by bootstrapper.cs that defines the regions.
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="215"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl Grid.Column ="0" Height ="500" prism:RegionManager.RegionName="LeftRegion" />
<GridSplitter Grid.Column ="0" Width="5" HorizontalAlignment="Right" VerticalAlignment="Stretch" ResizeBehavior="CurrentAndNext"/>
<ContentControl Grid.Column="1" Height ="400" prism:RegionManager.RegionName="RightRegion" />
</Grid>
Since Prism regions are nothing but UIElements, typically ContentPresenters, you should be able to use a GridSplitter as usual:
<Window x:Class="WpfApp1.MainWindow"
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:WpfApp2"
prism:RegionManager.RegionName="LeftRegion"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl prism:RegionManager.RegionName="LeftRegion" />
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<ContentControl Grid.Column="2" prism:RegionManager.RegionName="RightRegion" />
</Grid>
</Window>
This is a design I use often, a grid with columns of relative sizes (using the asterisk for width) so to mimic relative margins or other similar task.
An example of something similar to what I'm working on right now:
<Window x:Class="WpfApplication1.MainWindow"
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:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Text="1234567890123456789012345678901234567890123456789012345678901234567890" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="AAA" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="16" FontWeight="DemiBold"/>
</Grid>
</Grid>
</Window>
And this is its output
which is exactly what I expected.
But, if I just change the root Grid with a WrapPanel, like this:
<Window x:Class="WpfApplication1.MainWindow"
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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<WrapPanel>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Text="1234567890123456789012345678901234567890123456789012345678901234567890" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="AAA" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="16" FontWeight="DemiBold"/>
</Grid>
</WrapPanel>
</Window>
then I get this:
Ok, there is obviously some difference in placement due to the WrapPanel layout system, and this is ok to me and even expected, but...what the heck it's happening to the columns?
The relative size of the columns cannot be calculated unless the Grid actually has a Width. I am not sure why you want to use a WrapPanel here but you could specify a fixed Width or MinWidth of the Grid:
<WrapPanel>
<Grid x:Name="grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True"
Width="300">
I have a simple UserControl
<UserControl x:Class="UIWpf.UserControls.MultiSelectEnvironmentContextControl"
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"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="500">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="31*"/>
<RowDefinition Height="29*"/>
<RowDefinition Height="36*"/>
<RowDefinition Height="149*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="149*"/>
<ColumnDefinition Width="151*"/>
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" Grid.Row="0" x:Name="ComboBoxVersions" SelectedIndex="0">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0">
<TextBlock >Tests to be run for:</TextBlock>
<ComboBox Name="ComboBoxFileTypeSelector" DisplayMemberPath="Key" SelectedValuePath="Value" SelectedIndex="0">
</ComboBox>
</StackPanel>
</Grid>
</UserControl>
Now, I am using this UserControl in the MainWindow.xaml
<Window x:Class="UIWpf.MainWindow"
xmlns:u="clr-namespace:UIWpf.UserControls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition>
</RowDefinition>
</Grid.RowDefinitions>
<u:MultiSelectEnvironmentContextControl x:Name="MultiSelectEnvironmentContextControl"></u:MultiSelectEnvironmentContextControl>
</Grid>
</Window>
The UserControl uses data binding and data comes from a source which is configured in the config file.
I have the configuration settings in the app.config and when I run the application, the MainForm works fine with the UserControl populated with the data.
But at compile time I still see an error saying , the setting is missing from the configuration file.
I have 3 user controls
One is the parent that holds a GridViewUserControl and a ExportUserControl
The GridViewUserControl and ExportUserControl have their own viewmodels.
When I click the ExportButton in the ExportUserControl I need to pass the gridview to a command in the ExportUserControl. Everything I try is always passing null.
How would I do something like this? ( This is giving the error "binding.elementname cannot be set while using binding.relativesource"
<telerik:RadButton Content="Export"
Command="{Binding ExportCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=view:GridViewUserControl}, ElementName=GridViewData}"
Margin="0,10,0,0" />
EDIT: Parent Control looks like this
<UserControl x:Class="Sample.Sample1.View.ParentUserControl"
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:view="clr-namespace:GroundStation.Configuration.Viewer.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
DataContext="{Binding Source={StaticResource Locator}, Path=Main}">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150"/>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<view:ExportUserControl Margin="5"
Grid.Column="0"
Grid.Row="2"
Grid.RowSpan="2"
MinWidth="150"
/>
<GridSplitter Grid.Column="1"
Width="5"
Grid.Row="1"
Grid.RowSpan="3"
HorizontalAlignment="Stretch" />
<view:GridViewUserControl
Margin="5"
Grid.Column="2"
Grid.Row="1"
Grid.RowSpan="3"/>
</Grid>
</UserControl>