Develop Reference

How can I make controls in WPF stretch to fill available width when HorizontalAlignment and HorizontalContentAlignment don't work?

I'm trying to make a simple WPF app that has sections that fill the available width. Despite trying various ways of stretching the width of elements, containers, and children, nothing is working and I can't figure out why.
Another question said to use uniformgrid which worked well EXCEPT that it set the height of all the elements uniformly which was definitely not what I wanted. I want all of the sections to look like the one in the picture - filled width, height auto based on the content. Here's the basic setup:
<Window x:Class="A_Customizer.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:A_Customizer"
mc:Ignorable="d"
Title="MainWindow"
Background="#FF2B2B2B"
Width="800"
>
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type CheckBox}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Name="mainApp" >
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0" >
<Button ToolTip="Click to apply the below settings to this Jumpbox" Click="ApplyCustomizations">Customize</Button>
</WrapPanel>
<ScrollViewer Grid.Row="1">
<WrapPanel HorizontalAlignment="Stretch" >
<GroupBox
Background="#FFE2E2E2"
BorderBrush="#FF7F7F7F"
Margin="10,10,10,10"
Name="pathsBox"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
>
<GroupBox.Header>
<Border Background="#FFAFAFAF" CornerRadius="3">
<Label FontWeight="Bold">Key Paths</Label>
</Border>
</GroupBox.Header>
<StackPanel HorizontalAlignment="Stretch">
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBox Name="homeFolder" Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
<Button Grid.Column="1" Click="NewQuickPath" ToolTip="Change home folder">
<Image Source="images\add_folder.png" Height="25" Cursor="Hand"></Image>
</Button>
</Grid>
<TextBox Name="progFolder" Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
</StackPanel>
</GroupBox>
<GroupBox
Background="#FFE2E2E2"
BorderBrush="#FF7F7F7F"
Margin="10,10,10,10"
Name="quickBox"
Height="auto"
HorizontalContentAlignment="Stretch"
>
<GroupBox.Header>
<Border Background="#FFAFAFAF" CornerRadius="3">
<Label FontWeight="Bold">Quick Access Folders</Label>
</Border>
</GroupBox.Header>
<StackPanel HorizontalAlignment="Stretch">
<TextBlock TextWrapping="Wrap" Margin="15">
There are going to be folders you'll need to access frequently and keeping them pinned on top of the left menu in Explorer is helpful.
Select here to add them to the list of folders restored with the "Customize" button. Click any folder to remove it.
</TextBlock>
<Border CornerRadius="3" Background="#FFF3C7C7" Margin="6" Visibility="Collapsed" Name="quickErr" Tag="err_box">
<TextBlock Tag="errMsg" Foreground="#FFFD3434" TextWrapping="Wrap" Margin="6" ></TextBlock>
</Border>
<UniformGrid Name="quickPathsArea" Columns="1">
</UniformGrid>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
<Button Grid.Column="1" Click="NewQuickPath" ToolTip="Add a new folder">
<Image Source="images\add_folder.png" Height="25" Cursor="Hand"></Image>
</Button>
</Grid>
</StackPanel>
</GroupBox>
</wrappanel>
</scrollviewer>
</grid>

StackPanel with Orientation="Vertical" (default value) instead of WrapPanel should work: it will allow each child element use full width and as much height as necessary

How to keep TextBox's "IsFocus" property from changing to "false" when button is clicked ...?

I am having a problem with my mvvm project. I want to enter a value for each textbox, how do I know which textbox I am going to enter a value for?
I use backgroud to know which textbox is in focus. for example I want to enter the value 12 into textbox1, I will click on textbox1 and click on button1 and button2, the "content" property of textBox1 will be 12, (note I don't use the edit cursor, and I have many textBox). but when the button is pressed, the "IsFocus" property of the textbox is changed to "false" (I think). (I am just starting out and my English is not that good). Here is my xaml code.
<Window x:Class="ListViewWPF.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:ListViewWPF"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
<Window.Resources>
<Style x:Key="RedTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" Value="RosyBrown"/>
<Setter Property="IsReadOnly" Value="True"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<ListView x:Name="DataView" ItemsSource="{Binding Mydata}" SelectedItem="{Binding SelectedItems}" Margin="0,0,0,73.667" Grid.RowSpan="2">
</ListView>
<TextBox Text="TextBoxA" Style="{StaticResource RedTextBoxStyle}" FontSize="25" Grid.Row="0" Grid.Column="1" Margin="20"></TextBox>
<TextBox Text="TextBoxB" Style="{StaticResource RedTextBoxStyle}" FontSize="25" Grid.Row="1" Grid.Column="1" Margin="20"></TextBox>
<Button Grid.Row="0" Grid.Column="2" Margin="20" Content="1" FontSize="25"></Button>
<Button Grid.Row="1" Grid.Column="2" Margin="20" Content="2" FontSize="25"></Button>
</Grid>
</Window>
I hope to receive your comments!

I'm not sure if I fully understood your requirement, but:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<ListView x:Name="DataView" ItemsSource="{Binding Mydata}" SelectedItem="{Binding SelectedItems}" Margin="0,0,0,73.667" Grid.RowSpan="2">
</ListView>
<StackPanel Grid.Row="0" Grid.Column="1" FocusManager.IsFocusScope="True">
<TextBox Text="TextBoxA" Style="{StaticResource RedTextBoxStyle}" FontSize="25" Grid.Row="0" Grid.Column="1" Margin="20"></TextBox>
<TextBox Text="TextBoxB" Style="{StaticResource RedTextBoxStyle}" FontSize="25" Grid.Row="1" Grid.Column="1" Margin="20"></TextBox>
</StackPanel>
<Button Grid.Row="0" Grid.Column="2" Margin="20" Content="1" FontSize="25"></Button>
<Button Grid.Row="1" Grid.Column="2" Margin="20" Content="2" FontSize="25"></Button>
</Grid>
The idea here is to create focus scope, meaning scope within which the logical focus traverses. Other words, if you wish to keep one of the text boxes to keep focus while button receives focus, both: text box and button must belong to different focus scopes.
Does it answer your concern?

.xaml
<TextBox Text="TextBoxA" Style="{StaticResource RedTextBoxStyle}"
FontSize="25" Grid.Row="0" Grid.Column="1" Margin="20"
PreviewMouseLeftButtonDown="TextBoxMouseDown"></TextBox>
<TextBox Text="TextBoxB" Style="{StaticResource RedTextBoxStyle}"
FontSize="25" Grid.Row="1" Grid.Column="1" Margin="20"
PreviewMouseLeftButtonDown="TextBoxMouseDown"></TextBox>
<Button Grid.Row="0" Grid.Column="2" Margin="20" Content="1" FontSize="25"
Click="ButtonClick"></Button>
<Button Grid.Row="1" Grid.Column="2" Margin="20" Content="2" FontSize="25"
Click="ButtonClick"></Button>
.cs
TextBox last;
private void TextBoxMouseDown(object sender, MouseButtonEventArgs e)
{
last = (TextBox)sender;
}
private void ButtonClick(object sender, RoutedEventArgs e)
{
if (last != null)
{
MessageBox.Show(last.Text);
}
}

XAML Grid Columns Width

I have problem with Grid container as it doesn't work as I saw in some old tutorials.
I have following XAML:
<UserControl
x:Class="UWA.Views.LastActivities"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWA.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<DataTemplate x:Key="FullItem">
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image x:Name="icon" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Height="45" Width="45" VerticalAlignment="Center" Margin="5" Source="ms-appx:///Assets/Square44x44Logo.png"/>
<TextBlock x:Name="title" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Title, FallbackValue=Title}" Margin="3,0,0,0" VerticalAlignment="Center" FontWeight="Bold" FontSize="21.333" />
<TextBlock x:Name="description" Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Description, FallbackValue=Description}" Margin="3,0,0,0" VerticalAlignment="Center" FontSize="18.667" FontWeight="Bold" Foreground="#FF838383" />
<TextBlock x:Name="content" Grid.Row="2" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Converter, FallbackValue=Content}" Margin="3,0,0,0" HorizontalAlignment="Left" FontSize="16" Foreground="#FF838383" />
<TextBlock x:Name="time" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="2h" Margin="0,0,3,0" VerticalAlignment="Center" TextAlignment="Right" Foreground="#FFC1C1C1" FontSize="16" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListView x:Name="listView" Margin="0" FontSize="16" ItemTemplate="{StaticResource FullItem}"/>
</Grid>
</UserControl>
It's just ListView with custom ItemTemplate and it looks like this:
I would like to move my 3rd column ("2h" text on screen) way to the right and be aligned with it. HorizontalAlignment doesn't work.
As far as I've read this should work. My 1st column is set to Auto so it'll get Width based on content which in my case is always 55 (45 image width + margins). 3rd column is also set to auto and 2nd column is set to 1* (default) so it should get all left space. But it doesn't. For now it seems to work like there is 3 times Auto.

Modify the Grid in your DataTemplate and set the HorizontalAlignment Property to "Stretch"
Add to your List the ItemContainerStyle. Set the HorizontalAlignment property to "Stretch"
<UserControl
x:Class="UWA.Views.LastActivities"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWA.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<DataTemplate x:Key="FullItem">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image x:Name="icon" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Height="45" Width="45" VerticalAlignment="Center" Margin="5" Source="ms-appx:///Assets/Square44x44Logo.png"/>
<TextBlock x:Name="title" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Title, FallbackValue=Title}" Margin="3,0,0,0" VerticalAlignment="Center" FontWeight="Bold" FontSize="21.333" />
<TextBlock x:Name="description" Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Description, FallbackValue=Description}" Margin="3,0,0,0" VerticalAlignment="Center" FontSize="18.667" FontWeight="Bold" Foreground="#FF838383" />
<TextBlock x:Name="content" Grid.Row="2" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Converter, FallbackValue=Content}" Margin="3,0,0,0" HorizontalAlignment="Left" FontSize="16" Foreground="#FF838383" />
<TextBlock x:Name="time" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="2h" Margin="0,0,3,0" VerticalAlignment="Center" TextAlignment="Right" Foreground="#FFC1C1C1" FontSize="16" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListView x:Name="listView" Margin="0" FontSize="16" ItemTemplate="{StaticResource FullItem}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>

User control Changing size when In ViewBox

I have a user control(Windows 8.1 app) which I have developed using PATH vector control. I have put it inside a ViewBox . The problem is , when I change the screen resolution or even orientation , the Control either get reduced or get too much big.
I want to give it a fixed size so whatever the screen resolution is or orientation is, It shouldnt increase the size .
The XAML for my user control is
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="200">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" >
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
<Border.Background>
<ImageBrush x:FieldModifier="public" x:Name="image1" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>

If the only thing in the Viewbox is your user control, just get rid of the Viewbox, it stretches and scales the content by design!
If you have various controls in your Viewbox but you you only want some of them to resize, you might be better changing your layout to use a grid and only wrapping the stuff you want to resize in a Viewbox.
Here is an example of a 3x3 grid with 6 textboxes, 5 fixes size, 1 dynamic (in a Viewbox):
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="0" Grid.Column="1" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="0" Grid.Column="2" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="1" Grid.Column="0" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="2" Grid.Column="0" Text="Fixed Size"></TextBox>
<Viewbox Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<TextBox Text="Dynamic"/>
</Viewbox>
</Grid>

Window Style and using controls (C# and WPF)

I'm using Visual Studio 2013 to create my applications. I started to learn programming 4 years ago, and now a days I wanna to improve my programmer experience.
In the last days I had to create a simply application, but I didn't want to use a default style of a window. So I read that I could create a style for my window. I did it, it works fine, but there's a little problem: I can't put anything inside my window now... All the controls I put into a grid, into the window tag, aren't visible, but the compiler doesn't show any problems.
Here is the Style Code, then my Window XAML
<Style TargetType="Window" x:Key="DefaultWindow">
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="ResizeMode" Value="CanResizeWithGrip"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderThickness="1" BorderBrush="Black">
<Border BorderThickness="3" BorderBrush="#FF244E97">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#FF244E97">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Grid.Row="0" Stretch="Uniform" HorizontalAlignment="Left" Margin="10">
<TextBlock FontFamily="Corbel" Background="#FF244E97" Foreground="White">Costo Unitario</TextBlock>
</Viewbox>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Stretch="Uniform" HorizontalAlignment="Left" Margin="2, 10, 2, 10">
<TextBlock FontFamily="Corbel" Background="#FF244E97" Foreground="White">_</TextBlock>
</Viewbox>
<Viewbox Grid.Column="1" Stretch="Uniform" HorizontalAlignment="Left" Margin="2, 10, 2, 10">
<TextBlock FontFamily="Corbel" Background="#FF244E97" Foreground="White">◘</TextBlock>
</Viewbox>
<Viewbox Grid.Column="2" Stretch="Uniform" HorizontalAlignment="Left" Margin="2, 10, 20, 10">
<TextBlock FontFamily="Corbel" Background="#FF244E97" Foreground="White">X</TextBlock>
</Viewbox>
</Grid>
</Grid>
<Grid x:Name="ContenentGrid" Grid.Row="1" Background="White">
<ResizeGrip Width="10" Height="10" Grid.Column="1" VerticalAlignment="Bottom"/>
</Grid>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And my Windows Xaml:
<Window x:Class="Pabich.Marcin._5HI.CostoUnitario.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:chrt="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
Title="MainWindow" Height="600" Width="800" WindowStartupLocation="CenterScreen"
Style="{StaticResource DefaultWindow}">
<Grid>
<TextBlock>Hello!</TextBlock>
</Grid>
This should be a no-border window, within I can put controls, in the central grid. This is a screen of the window for now:
Screen of the Window
As you can see, I leaved all the white space for my controls, but they aren't there. So how can I make it?
PS: Keep in mind that I'm only a beginner, and I wanna to use simply code

I think that's happens because you don't use ContentPresenter to display window content. Without ContentPresenter WPF content model doesn't know where content should be placed and doesn't show it.
Try to add the ContentPresenter to your ContentGrid (WPF window also requires it in the AdornerDecorator).
<Grid x:Name="ContenentGrid" Grid.Row="1" Background="White">
<AdornerDecorator>
<ContentPresenter Content="{TemplateBinding Content}" />
</AdornerDecorator>
... ResizeGrip here ...
</Grid>