Fill all available space in StackPanel - wpf

<Window x:Class="DataBinding_01.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">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto">
<TextBox Height="23" Name="textBox1" Width="Auto" />
<TextBox Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</StackPanel>
</Window>
I want the Button fill all available space on the StackPanel. How can I do it?

If you mean fill all horizontal and vertical space you should use a DockPanel.
<DockPanel Height="Auto" Name="stackPanel1" Width="Auto" LastChildFill="True">
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox1" Width="Auto" />
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</DockPanel>

Related

WPF - Binding inside usercontrol content

I'm new in WPF and I have problems encountered. Why the binding of ListView ItemSource inside the sectionControls:ViewDefaultLayout element is not working. But when I try to remove the ListView element outside of the sectionControls:ViewDefaultLayout element the categories are showing.
CategoriesControl.xaml
<UserControl x:Class="POS.Wpf.Controls.CategoriesControl"
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:POS.Wpf.Controls"
xmlns:sectionControls="clr-namespace:POS.Wpf.Controls.Section"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Loaded="UserControl_Loaded"
x:Name="categoryUserControl">
<Grid>
<sectionControls:ViewDefaultLayout Title="Categories" Add="ViewDefaultLayout_Add" Delete="ViewDefaultLayout_Delete">
<ListView ItemsSource="{Binding DataContext.Categories}">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
</GridView>
</ListView.View>
</ListView>
</sectionControls:ViewDefaultLayout>
</Grid>
ViewDefaultLayout.xaml
<UserControl x:Class="POS.Wpf.Controls.Section.ViewDefaultLayout"
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:POS.Wpf.Controls.Section"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<DockPanel>
<Grid DockPanel.Dock="Top">
<Label Content="{Binding Title}" Margin="10" Style="{StaticResource BoldLargeLabel}"></Label>
</Grid>
<Border Padding="10">
<DockPanel>
<Border BorderBrush="{x:Null}" DockPanel.Dock="Top" Margin="0 0 0 5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="135" />
</Grid.ColumnDefinitions>
<Grid>
<TextBox Text="Search" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Foreground="#FFE4DFDF" VerticalContentAlignment="Center" FontSize="15"></TextBox>
<Button x:Name="SearchButton" Padding="5" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Right" Click="SearchButton_Click">
<materialDesign:PackIcon Foreground="#A2A6AC" Kind="Search" Width="30" Height="30" />
</Button>
</Grid>
<StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="AddButton" Padding="5" Background="{x:Null}" HorizontalAlignment="Right" Margin="0 0 5 0" Click="AddButton_Click">
<materialDesign:PackIcon Foreground="#A2A6AC" Kind="Add" Width="50" Height="30" />
</Button>
<Button x:Name="DeleteButton" Padding="5" Background="{x:Null}" HorizontalAlignment="Right" Click="DeleteButton_Click">
<materialDesign:PackIcon Foreground="#A2A6AC" Kind="Delete" Width="50" Height="30" />
</Button>
</StackPanel>
</Grid>
</Border>
<ContentPresenter />
</DockPanel>
</Border>
</DockPanel>
</ControlTemplate>
</UserControl.Template>

how to add a multiple buttons inside a groupbox in wpf?

I need to add a multiple buttons inside a groupbox in wpf, but I can't. I need to create my key pad for an atm machine, with all numbers, but if I try to create a button number 2, the button number 1 disappears.
what is wrong?
<Window x:Name="Win_Users" x:Class="ATM_Simulator.WindowUsers"
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:ATM_Simulator"
mc:Ignorable="d"
Title="WindowUsers" Height="300" Width="500">
<Grid>
<GroupBox x:Name="grbx_key_pad" Header="Key Pad" HorizontalAlignment="Left" Height="220" Margin="26,10,0,0" VerticalAlignment="Top" Width="189">
<Button x:Name="btn_1" Content="1" HorizontalAlignment="Left" Margin="10,13,0,0" VerticalAlignment="Top" Width="29" Height="32"/>
</GroupBox>
<GroupBox x:Name="grbx_select_transaction" Header="Select Transaction :" HorizontalAlignment="Left" Height="88" Margin="291,23,0,0" VerticalAlignment="Top" Width="179"/>
<GroupBox x:Name="grbx_select_account" Header="Select Account" HorizontalAlignment="Left" Height="92" Margin="291,138,0,0" VerticalAlignment="Top" Width="179"/>
<Button x:Name="btn_submit" Content="Submit" HorizontalAlignment="Left" Margin="291,239,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btn_close" Content="Close" HorizontalAlignment="Left" Margin="393,239,0,0" VerticalAlignment="Top" Width="77"/>
</Grid>
You have to put a container inside the GroupBox, for example a Grid would be a good choice:
<GroupBox x:Name="grbx_key_pad" Header="Key Pad" HorizontalAlignment="Left" Height="220" Margin="26,10,0,0" VerticalAlignment="Top" Width="189">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="btn_1" Grid.Column="0" Content="1" Width="29" Height="32"/>
<Button x:Name="btn_2" Grid.Column="1" Content="2" Width="29" Height="32"/>
<!-- more buttons -->
<Button x:Name="btn_4" Grid.Row="1" Grid.Column="0" Content="4" Width="29" Height="32"/>
<!-- yet more buttons -->
</Grid>
</GroupBox>

Simpliest cross-resolution apps and adaptive UI building. Can't make that in WPF

Currently trying to build simpliest cross-resolution app (in other words an adaptive UI). The Apps itself is intended to start at min res:1024x768 and max res: 1920x1080.
However I have no success in doing of that.
this is 1024x768 window, where everything looks good.
this is 1920x1080 window, where controls "swam". However pic adapted itself to resolution.
<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 ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<GroupBox x:Name="groupBox_Copy" Header="Truck2" Height="148" VerticalAlignment="Top" Margin="430,503.6,468.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy1" Header="Truck3" Height="148" VerticalAlignment="Top" Margin="752,503.6,146.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy2" Header="Truck1" Height="148" VerticalAlignment="Top" Margin="148,503.6,750.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png"/>
</Grid>
Layout via fixed Margins in not adaptive. There is nothing wrong in using nested Panels:
UniformGrid can arrange equal space for each child element (GroupBox).
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<UniformGrid Rows="1" Grid.Row="2">
<GroupBox x:Name="groupBox_Copy" Header="Truck2" Height="148" VerticalAlignment="Top">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy1" Header="Truck3" Height="148" VerticalAlignment="Top">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy2" Header="Truck1" Height="148" VerticalAlignment="Top">
<Button x:Name="button" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
</UniformGrid>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png"/>
</Grid>
1024x768.
1920x1080.
Looks a little better. However, the controls "swam" to left direction. As can be seen.
<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 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 HorizontalAlignment="Left" Height="138" Margin="10,9.6,0,0" Grid.Row="2" VerticalAlignment="Top" Width="998">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="147*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="171*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="120*"/>
</Grid.ColumnDefinitions>
<GroupBox x:Name="GroupBox1" Grid.Column="1" Header="Truck1" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,147.6,0">
<Button x:Name="button_Copy2" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-1.211,-0.299"/>
</GroupBox>
<GroupBox x:Name="GroupBox2" Grid.Column="3" Header="Truck2" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,171.6,0">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-1.211,-0.299"/>
</GroupBox>
<GroupBox x:Name="GroupBox3" Grid.Column="5" Header="Truck3" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,120.4,0">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
</Grid>
</Grid>

WPF Ribbon steals TAB

I have a simple WPF application with Ribbon and few controls. Unfortunately when pressing TAB key to change focus, Ribbon somehow manages looping only within itself, other controls don't get a chance...
This is the XAML:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
Title="MainWindow" Height="350" Width="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="136" />
<RowDefinition Height="175*" />
</Grid.RowDefinitions>
<my:Ribbon HorizontalAlignment="Stretch" Name="ribbon1" VerticalAlignment="Top">
<my:RibbonTab Header="Ribbon">
<my:RibbonGroup>
<my:RibbonComboBox Label="ComboBox" Name="ribbonComboBox1">
<my:RibbonGallery MaxColumnCount="1">
<my:RibbonGalleryCategory>
<my:RibbonGalleryItem Content="An item" />
</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonComboBox>
</my:RibbonGroup>
</my:RibbonTab>
</my:Ribbon>
<TextBox TabIndex="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="12,19,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
<TextBox TabIndex="2" Height="23" HorizontalAlignment="Left" Margin="12,48,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Grid.Row="1" />
OK. Let me answer myself. For my purposes it's OK to NOT to use TAB for Ribbon. For Ribbon I can use KeyTip(s), so basically I have just added Focusable="False" KeyboardNavigation.TabNavigation="None" into ribbon definition. So the whole code could look like this:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
Title="MainWindow" Height="350" Width="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="136" />
<RowDefinition Height="175*" />
</Grid.RowDefinitions>
<my:Ribbon Focusable="False" KeyboardNavigation.TabNavigation="None" HorizontalAlignment="Stretch" Name="ribbon1" VerticalAlignment="Top">
<my:RibbonTab Header="Ribbon" KeyTip="R">
<my:RibbonGroup>
<my:RibbonComboBox KeyTip="C" Label="ComboBox" Name="ribbonComboBox1">
<my:RibbonGallery MaxColumnCount="1">
<my:RibbonGalleryCategory>
<my:RibbonGalleryItem Content="An item" />
</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonComboBox>
</my:RibbonGroup>
</my:RibbonTab>
</my:Ribbon>
<TextBox TabIndex="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="12,19,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
<TextBox TabIndex="2" Height="23" HorizontalAlignment="Left" Margin="12,48,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Grid.Row="1" />
</Grid>
</Window>
KeyboardNavigation.TabNavigation="Continue" does it for me, using System.Windows.Controls.Ribbon.dll

Scrolling ValidationSummary in Silverlight

I am attempting to make ValidationSummary in Silverlight scrollable. It does not work and I am not sure what I am doing wrong.
When wrapped in ScrollViewer, the validationsummary is not shown.
<UserControl x:Class="SilverlightDataValidation.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:ct="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White" BindingValidationError="LayoutRoot_BindingValidationError">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="55" />
<ColumnDefinition Width="345" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="160" />
<RowDefinition Height="40*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="4" Height="135" HorizontalAlignment="Left" Margin="0,4,0,0" Name="scrollViewer1" VerticalAlignment="Top" MaxHeight="200" Width="333" Grid.Column="1" HorizontalScrollBarVisibility="Auto">
<ct:ValidationSummary Width="300" Grid.Column="1" Margin="0,0,45,0" />
</ScrollViewer>
<TextBox Name="txtName" Text="{Binding Name, Mode=TwoWay, ValidatesOnExceptions =True, NotifyOnValidationError=True, UpdateSourceTrigger=Explicit}"
Grid.Column="1" Grid.Row="1"
Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="185" />
<TextBox Name="txtAge"
Text="{Binding Age, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, UpdateSourceTrigger=Explicit}"
Grid.Column="1" Grid.Row="2"
Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" />
<Button Content="Save" Grid.Column="1" Grid.Row="3"
Height="23" HorizontalAlignment="Left" Name="butSave" VerticalAlignment="Top" Width="75" Click="butSave_Click" />
<TextBlock Grid.Row="1" Name="textBlock1" Text="Name"
VerticalAlignment="Top" Margin="22,0,0,0" Height="23" HorizontalAlignment="Left" />
<TextBlock Grid.Row="2" Name="textBlock2" Text="Age"
VerticalAlignment="Top" Margin="34,0,0,0" Height="23" HorizontalAlignment="Left" />
</Grid>
When you remove the validationsummary from ScrollViewer it shows.
ScrollView not required, was able to accomplish the same effect by setting maxheight property on the ValidationSummary

Resources