We Keep Coding

WPF - Manage UI

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>

How to make a grid inside a button have 100 percent width in WPF?

I have a button on a window that sizes to the window. I have put a grid inside the button with one row and two columns, and put a path in first column, and a textbox in the second.
My problem is I can't get the grid to stretch with the button.
Here is what is happening:
Here is what I want to happen:
I have the grids HorizontalAlignment="Stretch", yet it is not stretching.
What am I doing wrong here?
Here is the code:
<Window x:Class="GridInButtonIssue.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:GridInButtonIssue"
mc:Ignorable="d"
Title="MainWindow" Height="136.5" Width="269.839">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas x:Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-298.50531" Y="-576.33075"/>
</Canvas.RenderTransform>
<Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
</Canvas>
</Canvas>
<TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
</Grid>
</Button>
</Grid>
</Window>

You have to set the HorizontalContentAlignment to Strech on the Button directly like so:
<Window x:Class="GridInButtonIssue.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:GridInButtonIssue"
mc:Ignorable="d"
Title="MainWindow" Height="136.5" Width="269.839">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" HorizontalContentAlignment="Stretch" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas x:Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-298.50531" Y="-576.33075"/>
</Canvas.RenderTransform>
<Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
</Canvas>
</Canvas>
<TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
</Grid>
</Button>
</Grid>
</Window>
So it looks like this:

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>

I need to put a label in the right hand corner of my popup in XAML

Here is my code. I have tried several things to get the label in the top right hand corner of the popup and make it stay there, but nothing has worked.
Thanks for your help!
XAML:
<Window x:Class="ValidationWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local="clr-namespace:ValidationWPF"
Title="MainWindow" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="259" d:DesignWidth="420" SizeToContent="WidthAndHeight">
<Grid Height="129" Width="345">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="514*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="251*" />
</Grid.RowDefinitions>
<Button Content="Errors" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Grid.Column="1" Grid.Row="1" Margin="132,12,0,0" MouseEnter="button1_MouseHover">
</Button>
<Popup AllowsTransparency="True" PlacementTarget="{Binding ElementName=button1}" StaysOpen="True" AllowDrop="True" Name="PopUp1" PopupAnimation="Scroll">
<Popup.Child>
<Border BorderBrush="White" BorderThickness="3, 3, 0, 0">
<Border BorderBrush="Black" BorderThickness="3, 3, 3, 3">
<TextBlock Background="Salmon">
<Label Background="AliceBlue" Foreground="Black" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" MouseDown="mouse_DownHandeled" AllowDrop="False" Margin="100,100,0,0">
x
</Label>
<local:ValidationUserControl/>
</TextBlock>
</Border>
</Border>
</Popup.Child>
</Popup>
</Grid>
</Window>
As you see, I have a popup with a label that has an X in it. The label is fully functional. Now I just need it to look like a normal popup with the label in the top right hand corner.

Try this:
<TextBlock Background="Salmon" MinWidth="150" MinHeight="150" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="1" Background="AliceBlue" Foreground="Black" VerticalAlignment="Top" AllowDrop="False">
X
</Label>
</Grid>
</TextBlock>

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.