We Keep Coding

How to handle UserControl inside a window when the window size changed

I have a main window written in WPF that contains three sub windows and a user control with buttons. It looks like this:
What I want to do is to have the sub windows' ratio and the buttons' position fixed proportionally with the main window resizing.
I've handled the sub windows' size ratio, but I can't keep the buttons on the left side when the main widow's width is expanded:
And here is my code:
private void MainWindowResize(object sender, SizeChangedEventArgs e)
{
// sub windows size ratio
formA.Height = (this.ActualHeight - 80) * 0.5;
formA.Width = this.ActualWidth;
formB.Height = (this.ActualHeight - 80) * 0.5;
formB.Width = this.ActualWidth * 0.5;
formC.Height = (this.ActualHeight - 80) * 0.5;
formC.Width = this.ActualWidth * 0.5;
// buttons will not move to the left with this code
btnFrame.Width = this.ActualWidth;
}
+) WPF code:
MainWindow
<Grid x:Name="maingrid">
<DockPanel x:Name="panel1" LastChildFill="false">
<Frame DockPanel.Dock="Bottom" Height="35" Width="800" Source="pack://application:,,,/FormBottom;component/form_bottom.xaml" />
<WindowsFormsHost x:Name="formA" DockPanel.Dock="Top" Height="207" Width="800" >
<wftop:form_top x:Name="formTop" Dock="Fill"/>
</WindowsFormsHost>
<WindowsFormsHost x:Name="formB" DockPanel.Dock="Left" Height="207" Width="400" >
<wflt:form_left x:Name="formLeft" Dock="Fill"/>
</WindowsFormsHost>
<WindowsFormsHost x:Name="formC" DockPanel.Dock="Left" Height="207" Width="400">
<wfrt:form_right x:Name="formRight" Dock="Fill"/>
</WindowsFormsHost>
</DockPanel>
<DockPanel x:Name="panel2" LastChildFill="false" >
<Frame DockPanel.Dock="Bottom" Height="35" Width="800" Source="pack://application:,,,/FormBottom;component/form_bottom.xaml" />
</DockPanel>
</Grid>
btnFrame
<UserControl x:Class="FormBottom.form_bottom"
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:FormBottom"
mc:Ignorable="d"
Height="35" Width="800">
<StackPanel x:Name="bottompanel" Orientation="Horizontal" Height="35" VerticalAlignment="Bottom">
<Button Content="Panel1" MinWidth="70" Click="Button_Click" />
<Button Content="Panel2" MinWidth="70" Click="Button_Click_1" Margin="10,0,0,0" />
</StackPanel>
</UserControl>
Is there a way to have the buttons fixed on the left?

You do not have size control on your own. WPF provides various Panels for layouting out-of-the-box and there are also panels for proportional layouts like Grid or DockPanel.
Your example could look like this in XAML. The Rectangles represent your views. Using Grid panel you can define rows and columns and via their RowDefinition and ColumnDefinition you can set Height and Width to either explicit sizes, e.g. 100, let the size be determined automatically to fit the content with Auto or set star-sizes like 2* which lets you define proportions. The default value is * so in the layout below, the last row sizes to its content and the other rows are sized in proportion 1:1.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Fill="Pink"/>
<Rectangle Grid.Row="1" Grid.Column="0" Fill="MediumSeaGreen"/>
<Rectangle Grid.Row="1" Grid.Column="1" Fill="LightBlue"/>
<StackPanel Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
<Button Content="A" Width="100" Height="50"/>
<Button Content="B" Width="100" Height="50" Margin="10, 0, 0, 0"/>
</StackPanel>
</Grid>
You can achieve the same layout with different panels, so this is just an example. What is the most suitable approach depends on your requirements and preferences. The same layout in code:
var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
var pinkRectangle = new System.Windows.Shapes.Rectangle { Fill = Brushes.Pink };
grid.Children.Add(pinkRectangle);
Grid.SetRow(pinkRectangle, 0);
Grid.SetColumn(pinkRectangle, 0);
Grid.SetColumnSpan(pinkRectangle, 2);
var greenRectangle = new System.Windows.Shapes.Rectangle { Fill = Brushes.MediumSeaGreen };
grid.Children.Add(greenRectangle);
Grid.SetRow(greenRectangle, 1);
Grid.SetColumn(greenRectangle, 0);
var blueRectangle = new System.Windows.Shapes.Rectangle { Fill = Brushes.LightBlue };
grid.Children.Add(blueRectangle);
Grid.SetRow(blueRectangle, 1);
Grid.SetColumn(blueRectangle, 1);
var buttonA = new Button
{
Content = "A",
Width = 100,
Height = 50
};
var buttonB = new Button
{
Content = "B",
Width = 100,
Height = 50,
Margin = new Thickness(10, 0, 0, 0)
};
var stackPanel = new StackPanel { Orientation = Orientation.Horizontal };
grid.Children.Add(stackPanel);
Grid.SetRow(stackPanel, 2);
Grid.SetColumn(stackPanel, 0);
Grid.SetColumnSpan(stackPanel, 2);
stackPanel.Children.Add(buttonA);
stackPanel.Children.Add(buttonB);

I don't know what kind of control the btnFrame is but you can put the buttons inside of a e.g. StackPanel and set the HorizontalAlignment="Left" on it.
Your WPF code would be helpful to provide a better answer.
After you've posted your WPF I think you should just remove the Width="800" attribute from your Frame so that it always stretches to fit its containing DockPanel. Besides I can't see where the btnFrame name is set in the WPF.

dynamically populate grids inside a grid in wpf

I'm new to WPF. here I'm having following static grid
Main Grid
frame for child grid like this
Child Grid
I have a main grid, I'm trying to dynamically generate child grids and populate it inside Main Grid Column 0
Final outcome I'm trying to get like below
here I'm trying populate a collection of items with some styles (with separate block for each collection item property).
so for each collection item I want to generate a grid and bind that collection property names and values inside of a grid here in above picture red color represent grid for a collection item, black color grid is main grid.
really appreciate suggest an idea or propose better solution for this purpose
Edit:
upto now I tried following, here as child grid I'm trying to populate icTodoList grid 3 times, but here its only populate 1 time
XML file
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="147*"/>
<ColumnDefinition Width="220*"/>
<ColumnDefinition Width="150*"/>
</Grid.ColumnDefinitions>
<ItemsControl Name="icTodoList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Border BorderBrush="Black" BorderThickness="1">
<Grid Name="icTodoList" Grid.Row="0" Grid.Column="0" Margin="0,10,10,2941" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Right" Width="268">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="79*"/>
<ColumnDefinition Width="99*"/>
<ColumnDefinition Width="90*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="39*"/>
<RowDefinition Height="63*"/>
<RowDefinition Height="29*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Title}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Completion}"/>
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Description}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Title}"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Completion}"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Description}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="{Binding Title}"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Completion}"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="{Binding Description}"/>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Code Behind file
public WindowPanelConstructor()
{
InitializeComponent();
List<TodoItem> items = new List<TodoItem>();
for (int i = 0; i < 3; i++)
{
items.Add(new TodoItem() { Title = "Title" + i.ToString(), Completion = "Completion" + i.ToString(), Description = "Description" + i.ToString() });
icTodoList.ItemsSource = items;
}
}
public class TodoItem
{
public string Title { get; set; }
public string Completion { get; set; }
public string Description { get; set; }
}

This is just an example (I set the background of each grid to be different colour, this is just an example) to get you started, you can expand this by adding your own methods.
In Code:
public MainWindow()
{
InitializeComponent();
// get the reference of the column definition of the main grid, then set your new column definition as required.
var coldef = MainGrid.ColumnDefinitions;
coldef.Add(new ColumnDefinition(){Name = "col1", Width=new GridLength(100.0)});
coldef.Add(new ColumnDefinition() { Name = "col2", Width = new GridLength(100.0) });
coldef.Add(new ColumnDefinition() { Name = "col2", Width = new GridLength(100.0) });
// now add the child grids dynamically as many as you like.
for (var i = 0; i < 2; ++i)
{
var colour1 = (byte)(50 * i);
var colour2 = (byte)(100 * i);
var grid1 = new Grid()
{
Background = new SolidColorBrush(Color.FromRgb(100, colour1, colour2)),
};
grid1.SetValue(Grid.ColumnProperty, i);
// get the reference to the row definition the child grid, then set the rows as required.
var rowDef = grid1.RowDefinitions;
rowDef.Add(new RowDefinition() { Name = "Row1", Height = new GridLength(100.0) });
rowDef.Add(new RowDefinition() { Name = "Row2", Height = new GridLength(100.0) });
// add nesting child grids as many as you like.
for (var j = 0; j < 1; j++)
{
var r = (byte)(50 * i);
var g = (byte) (100 * i);
var grid2 = new Grid()
{
Background = new SolidColorBrush(Color.FromRgb(r, g, 255)),
};
grid2.SetValue(Grid.RowProperty, 0);
// add grid 3 to grid 2
grid1.Children.Add(grid2);
}
// Add grid1 to main grid.
MainGrid.Children.Add(grid1);
}
}
XAML:
<Window x:Class="SimpleProgressBar.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 x:Name="MainGrid">
</Grid>
</Window>
You can see in my xaml code, there is only one grid, that is the main grid that is used in the C# code above.

Canvas oversteps it's grid-row limits

I put a canvas into a row of a grid-layout. The canvas doesn't except any maxhight limits of the canvas itself neither of the row-height limits. It just fills the entire user-controll.
I have this layout inside a grid:
<DockPanel Grid.Row="1" MaxHeight="32">
<StackPanel DockPanel.Dock="Right">...</StackPanel>
<Grid DockPanel.Dock="Left" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="12" Height="12" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Canvas Grid.Row="0" VerticalAlignment="Stretch" SizeChanged="canvasBar_SizeChanged" Loaded="Canvas_Loaded">
...
</Canvas>
<Image Grid.Row="1">...</Image>
</Grid>
</DockPanel>
If I put another image instead of the canvas, it doesn't fill the entire user-control, but the canvas fills it. Am I missing any parameters here?
Edit:
SizeChanged and Loaded both trigger this function to draw rectangles:
Rectangle r = new Rectangle();
r.Height = canvasBar.ActualHeight;
r.Width = Rectwidth;
r.RadiusX = 1;
r.RadiusY = 1;
r.Margin = new Thickness(RecOffset, 0, 0, 0);
RecOffset += RectWidth + RectLimiterWidth;
r.Stroke = new SolidColorBrush(Color.FromRgb(0, 0, 0));
r.StrokeThickness = 1;
r.Fill = new SolidColorBrush(LastBrcColor);
canvasBar.Children.Add(r);

Canvas does not clip the content of its child elements to its bounds by default. You need to set the ClipToBounds property to true:
<Canvas ClipToBounds="True" ...>
...
</Canvas>

Silverlight: Add border around grid

I have a grid that I need to put into a border, doing this via XAML is easy
but how do I do this via C#?
everything that I have found thus far wants to add the border around each cell.
I need it to come out looking the same way XAML does it, please help!
I can not get the XAML to post correctly here:
<Border Grid.Column="1"
Grid.Row="0"
Background="AliceBlue"
BorderBrush="Black"
BorderThickness="4"
x:Name="Side6"
Visibility="Collapsed">
<UIElement.Projection>
<PlaneProjection RotationY="-90" />
</UIElement.Projection>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Column="2" Grid.Row="1" Click="RotateRight_Click">
<Button.Content>
<StackPanel>
<TextBlock HorizontalAlignment="Center">Rotate Right</TextBlock>
<TextBlock HorizontalAlignment="Center">To</TextBlock>
<TextBlock HorizontalAlignment="Center">Side 4</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<Button Grid.Column="0" Grid.Row="1" Click="RotateLeft_Click">
<Button.Content>
<StackPanel>
<TextBlock HorizontalAlignment="Center">Rotate Left</TextBlock>
<TextBlock HorizontalAlignment="Center">To</TextBlock>
<TextBlock HorizontalAlignment="Center">Side 2</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Text="Side 6">
</TextBlock>
</Grid>
</Border>
Here is the C# code that I'm using, maybe you can see what I am doing wrong?
public static void panelMain(string strPassGridName, System.Windows.Media.Color mcPassColor,
int intRowProperty, int intColumnProperty, Visibility vVisibility,
string[] strButtonTitles, Grid passLayoutRoot, Canvas passCanvas)
{
Grid panelGrid = new Grid();
panelGrid.Name = strPassGridName;
panelGrid.Background = new SolidColorBrush(mcPassColor);
panelGrid.SetValue(Grid.RowProperty, intRowProperty);
panelGrid.SetValue(Grid.ColumnProperty, intColumnProperty);
panelGrid.Visibility = vVisibility;
RowDefinition row1 = new RowDefinition();
row1.Height = new GridLength(100, GridUnitType.Auto);
panelGrid.RowDefinitions.Add(row1);
ColumnDefinition column1 = new ColumnDefinition();
column1.Width = new GridLength(100);
panelGrid.ColumnDefinitions.Add(column1);
passLayoutRoot.Children.Add(panelGrid);
}

I figured it out, I needed to create the border first then add the grid to the border.
One major difference is that I could not reference the border object directly, I needed to "find it"
Border findBorder = passLayoutRoot.FindName("bd" + strPassGridName) as Border;
if (findBorder == null)
{ }
else
{
findBorder.Child = panelGrid;
}
This worked perfectly....
Thanks to all that attempted to help

You can do it as below,
Border gridBorder = new Border();
gridBorder.BorderBrush = new SolidColorBrush(Colors.Black);
gridBorder.BorderThickness = new Thickness(4);
gridBorder.Child = new Grid(); //Your grid here
LayoutRoot.Children.Add(border); // ParentGrid(layout) holding the border

C# WPF Stackpanel layout

I have created a stackpanel in a treeviewitem. I'm trying to get my picture next to my checkbox and the text next to my picture box but I don't know how to do that. Currently this is happening:
This is my code:
ComboBoxItem tempComboItem = comboBox1.SelectedItem as ComboBoxItem;
CheckBox cbox = new CheckBox();
StackPanel panel = new StackPanel();
panel.Width = 260;
Label labelTitle = new Label();
Label labelStatus = new Label();
Image newImage = new Image();
newImage.Source = new BitmapImage(new Uri(imageTextBox1.Text));
newImage.Width = 85;
newImage.Height = 65;
panel.Children.Add(newImage);
labelTitle.Content = itemTextBox1.Text;
panel.Children.Add(labelTitle);
labelStatus.Content = "Beschikbaar";
panel.Children.Add(labelStatus);
labelStatus.Foreground = Brushes.Lime;
cbox.Content = panel;
TreeViewItem newChild = new TreeViewItem();
newChild.Header = cbox;
Can someone help me out.
I want the checkbox and image and text to be horizontal. I can do with: panel.Orientation.
But the two text labels on the right, I want them vertical, one below the other.
How do I do this?

I'd make the following XAML: (If you need help to turn this into code let me know)
<CheckBox>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Width="85"
Height="65" />
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="Title" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Text="beschikbaar" />
</Grid>
</CheckBox>

Do you simply mean you want Horizontal orientation?
If so, try the following:
panel.Orientation = Orientation.Horizontal;
Though, I fear you actually may require more intervention than just setting this property; lets see.

<DockPanel>
<CheckBox DockPanel.Dock="Left"/>
<StackPanel DockPanel.Dock="Right">
<TextBlock>My Text One</TextBlock>
<TextBlock>beschikbaar</TextBlock>
</StackPanel>
<Image DockPanel.Dock="Left" Source="myImage.png" />
</DockPanel>
This is a simple way to achieve the effect. From here you can easily adjust the vertical alignments to your liking. You can also easily do this in code, but I would recommend that you stick to XAML for layout based tasks.