WPF - Manage UI - c#

I want to make something like this type of UI:
There will be two or three buttons always on top with a textbox (no change after window resize).
How can I do this in WPF, actually am new to WPF and I want to do this strictly in .Net & WPF 3.5.


I remember when I started to learn WPF. It was a steep learning curve. You need to look into XAML files to get the UI. For your requirement, the code would look like this...assume you have some background in VS, start new WPF project ect. What you want is some grid and then you can either drag and drop from Toolbox, or you can just type code for your UI elements.
<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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Button Content="Button" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0"/>
<Button Content="Button" Grid.Column="3" Grid.Row="1" Margin="0,0,0,0"/>
<TextBox Text="Textbox" Grid.Column="5" Grid.Row="1" Margin="0,0,0,0"/>
<Button Content="Button" Grid.Column="7" Grid.Row="1" Margin="0,0,0,0"/>
<Border BorderBrush="Black" BorderThickness="1" Grid.ColumnSpan="7" Grid.Column="1" Height="100" Grid.Row="1" VerticalAlignment="Top">
</Border>
</Grid>

Related

WPF, GroupBox. Failed to add second button onto GroupBox

Just, tried to add the second button onto GroupBox, knowing that it's GroupBox after all and was surprised that is not allowed by WPF. Am I right?
<Window x:Class="WpfApplication2.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:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920">
<Grid x:Name="Grid_1" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png" />
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="112*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="118*"/>
</Grid.ColumnDefinitions>
<GroupBox x:Name="groupBox1" Header="Truck1" FontSize="16" Background="BlanchedAlmond" Grid.Column="1" >
<Button x:Name="button" Content="Start1" HorizontalAlignment="Left" Margin="154,6,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox2" Grid.Column="2" Header="Truck2" FontSize="16" Background="BlanchedAlmond" />
<GroupBox x:Name="groupBox3" Grid.Column="3" Header="Truck3" FontSize="16" Background="BlanchedAlmond" />
</Grid>
</Grid>

wpf grid and stackpanel fill

I have a grid with 2 rows one for a name and button and the other for output.
I want the first row to stretch the full width and the button to align to the right.
Wondering what I am missing as I thought the stackpanel would fill the width.
<Window x:Class="Sample.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="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" >
<TextBox Name="NameTextBox" MinWidth="150" HorizontalAlignment="Stretch"/>
<Button Margin="10,0" Name="AlertButton" Content="Say Hello" HorizontalAlignment="Stretch" />
</StackPanel>
<TextBox Name="OutpuTextBox" MinLines="5" Grid.Row="1" Grid.Column="0"/>
</Grid>
</Window>

Horizontal StackPanel ignores horizontally alignment of its children. You can change your layout to 2 columns and put Button in the second column of first row and set bottom TextBox to span across 2 columns
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Name="NameTextBox" MinWidth="150" HorizontalAlignment="Stretch"/>
<Button Margin="10,0" Name="AlertButton" Content="Say Hello" HorizontalAlignment="Stretch" Grid.Column="1" />
<TextBox Name="OutpuTextBox" MinLines="5" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>

Weird Gridsplitter resizing behaviour

Got his XAML :
<Window x:Class="correctionTests.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="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Menu Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" IsMainMenu="True">
<MenuItem Header="_Ouvrir" Click="Open_Click"/>
</Menu>
<GroupBox Header="Tests : " VerticalAlignment="Top" Grid.Column="0" Grid.Row="1">
<ListBox HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="testList"/>
</GroupBox>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1"
Grid.Row="1"
Width="5"
Background="#FFBCBCBC"/>
<UserControl x:Name="userContent" Grid.Column="2" Grid.Row="1"/>
</Grid>
</Window>
Now the problem is that the size of the controls on the column 0 is diminishing when i pull the gridsplitter to the RIGHT, on the other hand the size of the controls of the column 0 is increasing while pulling the gridsplitter to the left.
I already found this link on stack that suggested to change the first column's width to Auto.
The problem is : if i do that, the controls does not resize anymore.
How can i do so that my controls get all the width available ? (with the expected gridsplitter behaviour) ?

As your GridSplitter is on separate column, you have to
set ResizeBehavior="PreviousAndNext"

SharedSizeGroup for Silverlight

In Wpf we have SharedSizeGroup property to share the sizes, of lets say Columns, between Grids. Anybody aware about the similar functionality support in Silverlight?

Shared sizing is best implemented using element property bindings in Silverlight. Just make all your shared sized elements bind to the width/height of another.
Refer Following:
<UserControl x:Class="SLTestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ext="clr-namespace:System.Windows.Controls.Extensions;assembly=System.Windows.Controls.Extensions"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="White" ext:SharedSize.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid x:Name="firstfirstGrid" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ext:SharedSize.SharedSizeGroup="A"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" ext:SharedSize.SharedSizeGroup="A"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Green" BorderThickness="2">
<TextBlock x:Name="txtFirstFirst" >
<Run>aa</Run>
<LineBreak />
<Run>aa</Run>
</TextBlock>
</Border>
</Grid>
<Grid x:Name="firstsecondGrid" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ext:SharedSize.SharedSizeGroup="A"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" ext:SharedSize.SharedSizeGroup="A"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Blue" BorderThickness="2">
<TextBlock Text="aaaaaaaaaaaaaaaa" />
</Border>
</Grid>
</Grid>
</UserControl>
Link Referance:
http://die-rooter.de/ITworks/archives/27-SharedSize-Grid-with-Silverlight.html
Hope Its Helpful.

<UserControl x:Class="SLTestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ext="clr-namespace:System.Windows.Controls.Extensions;assembly=System.Windows.Controls.Extensions"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="White" ext:SharedSize.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid x:Name="firstfirstGrid" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ext:SharedSize.SharedSizeGroup="A"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" ext:SharedSize.SharedSizeGroup="A"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Green" BorderThickness="2">
<TextBlock x:Name="txtFirstFirst" >
<Run>aa</Run>
<LineBreak />
<Run>aa</Run>
</TextBlock>
</Border>
</Grid>
<Grid x:Name="firstsecondGrid" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ext:SharedSize.SharedSizeGroup="A"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" ext:SharedSize.SharedSizeGroup="A"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Blue" BorderThickness="2">
<TextBlock Text="aaaaaaaaaaaaaaaa" />
</Border>
</Grid>
</Grid>
</UserControl>

Awesomium raises ArgumentException in WindowsBase.dll

I am making an application with WPF and I have a UserControl with a Awesomium WebControl.
The moment I add a copy of this UserControl to my main window, I get an ArgumentException from WindowsBase.dll saying that "Width and Height must be positive".
Here is that UserControl:
<UserControl x:Class="ForumPost.ForumPost"
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" MinWidth="505" MinHeight="250" xmlns:my="http://schemas.awesomium.com/winfx">
<Grid Name="postGrid" Margin="5">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Background="#3166A1">
<Grid.RowDefinitions>
<RowDefinition MinHeight="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="150" />
<ColumnDefinition MinWidth="100" />
<ColumnDefinition MinWidth="125" />
<ColumnDefinition MinWidth="125" />
</Grid.ColumnDefinitions>
<Grid Height="150">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="125" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="20"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Margin="0 0 5 0" Name="specialUserFlag"/>
<TextBlock TextAlignment="Center" FontWeight="Bold" FontSize="16" Foreground="White" Name="postUsername" Grid.Column="1"/>
</Grid>
<Image Grid.Row="1" MaxWidth="125" MaxHeight="125" Name="postAvatar" />
</Grid>
<TextBlock Grid.Column="2" TextAlignment="Center" FontWeight="Bold" FontSize="16" Foreground="White" VerticalAlignment="Center" Name="postTimestamp" TextWrapping="Wrap" />
</Grid>
<my:WebControl Grid.Row="1" Name="webBrowser"/>
</Grid>
And here is my main window, as #LukeWoodward requested:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="Saxaphone.MainWindow"
Title="MainWindow" Height="850" Width="1600"
Icon="main.ico">
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="305" />
<ColumnDefinition MinWidth="1017" />
</Grid.ColumnDefinitions>
<TreeView x:Name="ForumView" ScrollViewer.HorizontalScrollBarVisibility="Diforumbled" Style="{DynamicResource ForumViewStyle}" SelectedItemChanged="ForumView_SelectedItemChanged" />
<Grid x:Name="forumGrid" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="512" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" Grid.Column="0" Height="{Binding ActualHeight, ElementName=forumGrid}">
<StackPanel x:Name="forumThreads"></StackPanel>
</ScrollViewer>
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto" Grid.Column="1" Height="{Binding ActualHeight, ElementName=forumGrid}">
<StackPanel x:Name="forumPosts"/>
</ScrollViewer>
</Grid>
</Grid>

I've now been able to reproduce the ArgumentException you're getting. I suspect that this is a bug in Awesomium. I would recommend that you contact Awesomium Support at http://support.awesomium.com/.
I found that the following XAML is sufficient to reproduce the ArgumentException. There was no need for any user-controls nor adding controls at runtime:
<StackPanel>
<as:WebControl xmlns:as="http://schemas.awesomium.com/winfx" />
</StackPanel>
I found that it was possible to work around this issue by setting an explicit Width and Height on the WebControl. It seems that a WebControl doesn't like being inside a StackPanel unless it (the WebControl) has both Width and Height set.

We are aware of this issue and it will be fixed in the final release of version 1.7.

Categories