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.

ScrollViewer not showing all content when canvas is scaled using ScaleTransform

I have two Canvas panels in ScrollViewer. One is the main canvas which is having a grid shape drawn on its back ground. Then I have two ItemsControl. The first ItemsControl is having Stackpanel as its ItemsPanel with Horizontal Orientation. The second ItemsControl is having Canvas as its Panel. On this canvas I am drawing Line objects in DataTemplate of Itemscontrol.There is PreviewMouseWheel event on this canvas. In the event handler I am zooming this canvas which is zooming the Line objects. The width of this canvas is binded to ViewModel property CanvasWidth. Also this will change the width of Outer Canvas as its width is also binded to ViewModel Property CanvasWidth. When the PreviewMouseWheel is fired, I am adding more grid lines on main Canvas. I have TextBlock over them as DataTemplate of ItemsSource. Before zooing, the content of last TextBlock was 14260. After zoomin it should remain 14260. but the step value of two consecutive TextBlock should be reduced. Right now I am not able to see the whole content through ScrollViewer. The step size is reduced which was desired but the new grid lines which are drawn cannot be seen throught Scrollviewer. i know there is content. but I am unable to acces it. The scrollviewer is not showing it.
<Grid x:Name="grid1" >
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ScrollViewer Name="scrollViewer" HorizontalScrollBarVisibility="Auto" Grid.Row="1" Grid.Column="3" Margin="10,10,0,10" >
<Canvas Name="back_canvas" Height="12000" Width="{Binding CanvasWidth}" Margin="0,0,10,0" >
<Canvas.Background>
<DrawingBrush TileMode="Tile" Viewport="0,0,40,40" ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,50,50"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Gray" Thickness="1"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Canvas.Background>
<ItemsControl ItemsSource="{Binding TimeAxis}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="0,0,3,0" Width="37" Background="GreenYellow" >
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Lines}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Height="12000" Background="Transparent" Name="front_canvas"
PreviewMouseWheel="OnPreviewMouseWheel"
Width="{Binding CanvasWidth, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
</Line>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
</ScrollViewer>
</Grid>
private void UpdateGraph(Canvas canvas, double deltaValue)
{
List<MarkerView> markers = new List<MarkerView>();
scaleFactor += deltaValue;
double tempScale = scaleFactor;
if (scaleFactor < 1.0)
{
scaleFactor = 1.0;
}
if (scaleFactor > maximumScale)
{
scaleFactor = maximumScale;
}
if (tempScale > 0)
{
totalSamples = graphVM.maxSignalLength;
maximumCanvasWidth = totalSamples * maximumDeltaDistance;
if(scaleFactor<=maximumDeltaDistance)
{
ScaleTransform scaleTransform = new ScaleTransform(scaleFactor, 1);
canvas.RenderTransform = scaleTransform;
verticalLines.ForEach(x =>
{
x.RenderTransformOrigin = new Point(1, 1);
x.RenderTransform = new ScaleTransform(1 / scaleTransform.ScaleX, 1 / scaleTransform.ScaleY);
});
if (deltaValue < 0)
{
graphVM.CanvasWidth = graphVM.InitialCanvasWidth * tempScale;
}
else
{
if (graphVM.InitialCanvasWidth * scaleFactor > maximumCanvasWidth)
graphVM.CanvasWidth = maximumCanvasWidth;
else
graphVM.CanvasWidth = graphVM.InitialCanvasWidth * scaleFactor;
}
graphVM.ResetLabels();
DeltaDistance = canvas.Width / totalSamples;
MarkerView markerRed =
UIHelperView.FindChild<MarkerView>(Application.Current.MainWindow, "splitterRed");
MarkerView markerGreen =
UIHelperView.FindChild<MarkerView>(Application.Current.MainWindow, "splitterGreen");
markers.Add(markerRed);
markers.Add(markerGreen);
// Move Markers with zooming
foreach (MarkerView marker in markers)
{
marker.Delta = DeltaDistance; // after zooming if you move the marker then this value will be used to get correct position
Canvas.SetLeft(marker, marker.XPosition * DeltaDistance);
}
markers.Clear();
}
}
}
here is the output picture https://imgur.com/a/7WTrBoc
this is zoomed output https://imgur.com/C7SCOSJ

RenderTransform doesn't affect ActualWidth/Height of the control. Try using LayoutTransform instead.

Storyboard targeting GridLength for WP8

I want to make a storyboard for RowDefinition changing the Height, and I found this to help me. The only problem when I want to create the class GridLengthAnimation, I cannot make it a AnimationTimeline. Is this because windows phone 8 does not support this?
In this case is there another work around for making a storyboard for RowDefinition?

Easiest way may be that you put grids to the rows, and animate their Height-property like this.
Here is the xaml:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Background="AliceBlue"
Grid.Row="0"
Height="100"
Tap="Grid_Tap"
CacheMode="BitmapCache" />
<Grid Background="AntiqueWhite"
Grid.Row="1"
Height="100"
Tap="Grid_Tap"
CacheMode="BitmapCache" />
<Grid Background="Aqua"
Grid.Row="2"
Height="100"
Tap="Grid_Tap"
CacheMode="BitmapCache" />
<Grid Background="Aquamarine"
Grid.Row="3"
Height="100"
Tap="Grid_Tap"
CacheMode="BitmapCache" />
</Grid>
And the cs:
private void AnimateHeight(Grid grid)
{
double newHeight = grid.ActualHeight == 100 ? 300 : 100; //select the height we want to animate
Storyboard story = new Storyboard();
DoubleAnimation animation = new DoubleAnimation();
animation.To = newHeight;
animation.Duration = TimeSpan.FromSeconds(0.5);
Storyboard.SetTarget(animation, grid);
Storyboard.SetTargetProperty(animation, new PropertyPath(Grid.HeightProperty));
story.Children.Add(animation);
story.Begin();
}
private void Grid_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
Grid grid = sender as Grid; //select the grid we tapped
AnimateHeight(grid);
}
Notice that I putted cachemode to bitmapcache all of the grids. That's not necessary, but gives more fluent animation, because static grids won't be redrawed again in each frame.

WPF Grid RowSpan layout understanding

I have a very simple XAML
<ui:BorderedGrid>
<ui:BorderedGrid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</ui:BorderedGrid.RowDefinitions>
<ui:BorderedGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</ui:BorderedGrid.ColumnDefinitions>
<StackPanel Background="Blue" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0" Margin="5" Width="200" Height="70"></StackPanel>
<StackPanel Background="Red" VerticalAlignment="Top" Grid.Row="1" Grid.Column="0" Margin="5" Grid.RowSpan="2" Width="200" Height="300"></StackPanel>
<StackPanel Background="Plum" VerticalAlignment="Top" Grid.Row="0" Grid.Column="1" Margin="5" Grid.RowSpan="2" Width="200" Height="150"></StackPanel>
<StackPanel Background="SaddleBrown" VerticalAlignment="Top" Grid.Row="2" Grid.Column="1" Margin="5" Width="200" Height="250"></StackPanel>
</ui:BorderedGrid>
The BorderedGrid is just an extended version of WPF standard Grid, which have overriden OnRender function to draw column and row lines. Following is it's implementation
public class BorderedGrid : Grid
{
protected override void OnRender(DrawingContext dc)
{
double leftOffset = 0;
double topOffset = 0;
System.Windows.Media.Pen pen = new System.Windows.Media.Pen(System.Windows.Media.Brushes.LightGray, 1);
pen.Freeze();
foreach (RowDefinition row in this.RowDefinitions)
{
dc.DrawLine(pen, new System.Windows.Point(0, topOffset), new System.Windows.Point(this.ActualWidth, topOffset));
topOffset += row.ActualHeight;
}
// draw last line at the bottom
dc.DrawLine(pen, new System.Windows.Point(0, topOffset), new System.Windows.Point(this.ActualWidth, topOffset));
foreach (ColumnDefinition column in this.ColumnDefinitions)
{
dc.DrawLine(pen, new System.Windows.Point(leftOffset, 0), new System.Windows.Point(leftOffset, this.ActualHeight));
leftOffset += column.ActualWidth;
}
// draw last line on the right
dc.DrawLine(pen, new System.Windows.Point(leftOffset, 0), new System.Windows.Point(leftOffset, this.ActualHeight));
base.OnRender(dc);
}
}
The problem is, I am assuming the output should be like this
But the actual output is like this
My question is why this white space is left in first row? I think I am missing very simple thing.. :(

All the rows need to be aligned irrespective of columns. Since the height of row 0 is auto. Its actual height becomes the height of its tallest child element + margin, which will be a portion of the plum height + 10 (from margin).
Since the height (70) of the blue panel is shorter than the height of its row (row 0) and it is vertical aligned to the top, you get the the white space below it.
I believe the result you are seeing is what is expected based on your configuration of rows, row spans, height, etc.
In a way, your horizontal grid lines already hinted at the computed row heights.
Here is another way to look at it:
Height of row 2 is height of SaddleBrown
Height of row 1 is height of row 2 minus height of Red
Height of row 0 is height of Plum minus height of row 1
Height of row 0 is great than the height of Blue. Blue is vertical aligned to the top and therefore has a white space below it.

I try not to spend too much time fighting with WPF's Auto. It seems like your two columns are largely independent in terms of their layout. You could do something like this, basically rendering two independent columns:
<ui:BorderedGrid>
<ui:BorderedGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</ui:BorderedGrid.ColumnDefinitions>
<StackPanel Width="200" Grid.Column="0">
<StackPanel Background="Blue"Margin="5" Height="70"></StackPanel>
<StackPanel Background="Red" Margin="5" Height="300"></StackPanel>
</StackPanel>
<StackPanel Width="200" Grid.Column="1">
<StackPanel Background="Plum" Margin="5" Height="150"></StackPanel>
<StackPanel Background="SaddleBrown"Margin="5" Height="250"></StackPanel>
</StackPanel>
</ui:BorderedGrid>

Programmatically Create Grid with Custom Element

I'm trying to create a grid programmatically and appending a custom control as a child to the grid as row 0 column 0 out of a 2x2 matrix. To make matters more tricky, I'm using the MVVM design pattern. Heres some code to help everyone get the idea:
App.xaml.cs
base.OnStartup(e);
var viewModel = new MainWindowViewModel();
var mainWindow = new MainWindow();
mainWindow.GridWindows = viewModel.Window.GridWindows;
MainWindowViewModel - method returns the GridWindows.
private Grid CreateGrid()
{
Grid grid = new Grid();
// Create column definitions.
ColumnDefinition columnDefinition1 = new ColumnDefinition();
ColumnDefinition columnDefinition2 = new ColumnDefinition();
columnDefinition1.Width = new GridLength(640);
columnDefinition2.Width = new GridLength(640);
// Create row definitions.
RowDefinition rowDefinition1 = new RowDefinition();
RowDefinition rowDefinition2 = new RowDefinition();
rowDefinition1.Height = new GridLength(340);
rowDefinition2.Height = new GridLength(340);
// Attached definitions to grid.
grid.ColumnDefinitions.Add(columnDefinition1);
grid.ColumnDefinitions.Add(columnDefinition2);
grid.RowDefinitions.Add(rowDefinition1);
grid.RowDefinitions.Add(rowDefinition2);
// Create preview window.
Border border = new Border();
border.BorderThickness = new Thickness(20);
border.Padding = new Thickness(8);
border.SetResourceReference(Control.BackgroundProperty, "PreviewWindow");
MediaRTSPElement previewElement = new MediaRTSPElement();
previewElement.Name = "RTSPStreamPlayer";
previewElement.Stretch = Stretch.UniformToFill;
previewElement.Source = "rtsp://192.100.100.22/media/video1";
previewElement.VideoRenderer = VideoRendererType.EnhancedVideoRenderer;
previewElement.LoadedBehavior = WPFEVR.DirectShow.Players.MediaState.Play;
previewElement.SpeedRatio = 0.5;
//border.Child = previewElement;
// Add preview window.
for (int i = 0; i < 4; i++)
{
grid.Children.Add(previewElement as UIElement);
Grid.SetColumn(previewElement, i);
Grid.SetRow(previewElement, i);
break;
}
return grid;
}
And the XAML Markup that the grid should assign to
<Grid x:Name="GridWindows"></Grid>
The problem is my custom control does not appear in the grid layout, heres the xaml code that does it without code-behind, and this does work:
<Grid x:Name="GridWindows">
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="640" />
<ColumnDefinition Width="640" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="340" />
<RowDefinition Height="340" />
</Grid.RowDefinitions>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="0" Grid.Column="0">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.22/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="0" Grid.Column="1">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer2"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.78/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="1" Grid.Column="0">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer3"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.78/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="1" Grid.Column="1">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer4"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.22/media/video1"
SpeedRatio="0.5" />
</Border>-->
</Grid>
Any ideas as to why programmatic code isn't working?

if you're creating Grid in the xaml you can't later set it in code. Grid (instance) is already in visualtree. Overwriting variable won't do any effect. You should set your Grid as content of xaml defined control. I'm guessing that your code looks like this:
Code:
this.GridWindows = createdGrid;
Xaml:
<Grid x:Name="GridWindows"></Grid>
In code you should have something like this:
this.GridWindows.Children.Add(createdGrid);