I have a WPF app which has a grid with 2 columns set to * and auto. The issue is when I reduce the size of the window the children in second column are getting clipped from right instead of left. I expect them to clip from left because I have set the horizontal alignment to right.
Is there a way we can clip the second column elements from left?
<Window x:Class="WpfApp2.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:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="60"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<DockPanel HorizontalAlignment="Right" Grid.Column="1">
<Button Click="Button_Click" Content="click me" Width="150" DockPanel.Dock="Right" />
<Label Content="abcdef" Width="200" DockPanel.Dock="Right" />
<Label x:Name="mLog"/>
</DockPanel>
<Button Click="Button_Click" DockPanel.Dock="Right" Content="click me" Width="150"/>
<Label Content="abcdef" Width="200" DockPanel.Dock="Right"/>
</Grid>
</Window>
Instead of this:
<Window x:Class="WpfApp2.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:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="60"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<DockPanel HorizontalAlignment="Right" Grid.Column="1">
<Button Click="Button_Click" Content="click me" Width="150" DockPanel.Dock="Right" />
<Label Content="abcdef" Width="200" DockPanel.Dock="Right" />
<Label x:Name="mLog"/>
</DockPanel>
<Button Click="Button_Click" DockPanel.Dock="Right" Content="click me" Width="150"/>
<Label Content="abcdef" Width="200" DockPanel.Dock="Right"/>
</Grid>
</Window>
try this:
<Window x:Class="WpfApp2.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:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="60"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<DockPanel HorizontalAlignment="Right" Grid.Column="1">
<Button Click="Button_Click" Content="click me" Width="150" DockPanel.Dock="Right" />
<Label Content="abcdef" Width="200" DockPanel.Dock="Right" />
<Label x:Name="mLog"/>
</DockPanel>
<Button Click="Button_Click" DockPanel.Dock="Right" Content="click me"/>
<Label Content="abcdef" Width="200" DockPanel.Dock="Right"/>
</Grid>
</Window>
i deleted the last button width property.
output:
I would guess you are trying to make 3 column layout with 1 button on either side and 1 middle lane for content.
So you could try something like this, where all your content are in same grid with different z-index and horizontal alignments, now when you resize the window the label stays in middle and the buttons "clip behind" the label content from the right and the left.
<Grid>
<Button HorizontalAlignment="Left" Content="click me" Width="150" />
<Button HorizontalAlignment="Right" Content="click me" Width="150" />
<Label HorizontalAlignment="Center" Content="abcdef" Width="200" Background="White" />
</Grid>
In your DockPanel, HorizontalAlignment only help when the Width of the DockPanel is bigger than total Width of all its children. The Button and the Label have fixed size 200 and 150 and I believe the behavior of WPF will clip element from the left.
The first tricky way is having the DockPanel fill both columns, when the Grid go smaller, a part of the DockPanel will go under the content on the first column giving the feel like it is clipped from the left.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<DockPanel HorizontalAlignment="Right" Grid.ColumnSpan="2" LastChildFill="True">
<Button Click="Button_Click" Content="click me 2" Width="150" DockPanel.Dock="Right" />
<Label Content="abcdef 2" Width="200" />
<Label x:Name="mLog" DockPanel.Dock="Right"/>
</DockPanel>
<Button Click="Button_Click" Content="click me 1" HorizontalContentAlignment="Stretch"/>
<Label Content="abcdef 1" HorizontalContentAlignment="Stretch"/>
</Grid>
Another proper way is using another Grid instead of DockPanel, make sure we have the first column fill the space so that will go down size along with the container.
<Grid HorizontalAlignment="Right" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Button Click="Button_Click" Content="click me" Grid.Column="1" MinWidth="150"/>
<Label Content="abcdef" Grid.Column="0"/>
<Label x:Name="mLog"/>
</Grid>
Related
Just, tried to add the second button onto GroupBox, knowing that it's GroupBox after all and was surprised that is not allowed by WPF. Am I right?
<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 x:Name="Grid_1" 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 Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="112*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="118*"/>
</Grid.ColumnDefinitions>
<GroupBox x:Name="groupBox1" Header="Truck1" FontSize="16" Background="BlanchedAlmond" Grid.Column="1" >
<Button x:Name="button" Content="Start1" HorizontalAlignment="Left" Margin="154,6,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox2" Grid.Column="2" Header="Truck2" FontSize="16" Background="BlanchedAlmond" />
<GroupBox x:Name="groupBox3" Grid.Column="3" Header="Truck3" FontSize="16" Background="BlanchedAlmond" />
</Grid>
</Grid>
I use this NotifyIcon Nuget. And created a Context Menu with some different elements in it. (MenuItem, TextBox, Separator, TextBlock, Grid, Slider)
In Windows 7 every thing shows like i want to. (TextBox with HorizontalAlignment="Stretch" use all the space which is free, Slider too, Grid spread also streched)
But in Windows 10 it don't strech. The Textboxes expand if I type a Text that need more space, so thats ok. But the slider is only 1px long, so you can set it to ON/OFF instead of 0 to 255. And the Grid looks ugly.
Win 7 picture Win 10 picture
Here is my Code:
<Window x:Class="ContextMenu.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:tb="http://www.hardcodet.net/taskbar"
xmlns:local="clr-namespace:ContextMenu"
mc:Ignorable="d"
Title="MainWindow" Height="1" Width="100"
AllowsTransparency="True" WindowStyle="None" Background="Black"
Top="0"
Left="0"
Topmost="True" ShowInTaskbar="False">
<Grid>
<tb:TaskbarIcon x:Name="MyNotifyIcon"
IconSource="/Icons/Ninja.ico"
ToolTipText="Overlay">
<tb:TaskbarIcon.ContextMenu>
<ContextMenu>
<MenuItem x:Name="CheckPing" IsCheckable="True" Header="Ping"></MenuItem>
<TextBox x:Name="TextPing" Text="8.8.8.8" HorizontalAlignment="Stretch"/>
<Separator/>
<TextBlock Text="Set the Position"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="WindowTop" HorizontalAlignment="Stretch" Text="0"></TextBox>
<TextBox x:Name="WindowLeft" HorizontalAlignment="Stretch" Grid.Column="1" Text="0"></TextBox>
</Grid>
<TextBlock Text="Set the Opacity"/>
<Slider x:Name="SliderOpacity" Minimum="0" Maximum="255" HorizontalAlignment="Stretch"></Slider>
<TextBlock Text="Set the Fontsize"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="10"></TextBlock>
<Button Grid.Column="1" Content="+"></Button>
<Button Grid.Column="2" Content="-"></Button>
</Grid>
<MenuItem Header="Exit"></MenuItem>
</ContextMenu>
</tb:TaskbarIcon.ContextMenu>
</tb:TaskbarIcon>
<StackPanel x:Name="VerticalStackLong">
<StackPanel x:Name="HorizontalStack" Orientation="Horizontal">
<StackPanel x:Name="MainGrid"></StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Window>
My solution was to just set the "MinWidth".
for example:
<Slider x:Name="SliderOpacity" Minimum="0" Maximum="255" HorizontalAlignment="Stretch" MinWidth="80"></Slider>
I did not found a better solution until now.
I want to make the page inside the frame to adjust it's size automatically whenever I resize the main window.
First, I used only stack panels in designing the page, then I put them inside the cells of the grid but it didn't work.
Main window xmal:
<Window x:Class="WpfApplication3.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:WpfApplication3"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="1200">
<Grid Name="gridUI">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="207*"/>
<ColumnDefinition Width="122*"/>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="35*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Label Background="AliceBlue" FontSize="8" HorizontalAlignment="Left" Name="doc" Margin="0,0,0,26.333" Grid.RowSpan="2">Documents</Label>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1" Margin="4.667,0.333,121.565,0.333" Grid.ColumnSpan="2">
<Button Click="NewSample_Click">New Sample</Button>
<Button Click="CreateReport_Click">Create Report</Button>
</StackPanel>
<Button Grid.Row="1" Grid.Column="4" Margin="0,0.333,-0.334,0.333">Settting</Button>
<StackPanel Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Name="sp_doc" Margin="0,0.333,0.333,-0.333">
<StackPanel Orientation="Horizontal" >
<Button x:Name="sss" Click="sampleDropDown">s</Button>
<Label FontSize="12" Name="sam">Samples</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_s">
</StackPanel>
<StackPanel Orientation="Horizontal" >
<Button Click="reportDropDown">r</Button>
<Label>Reports</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_r">
</StackPanel>
</StackPanel>
<Frame x:Name="newSampleFrame" Grid.ColumnSpan="3" Content="" Grid.Column="1" HorizontalAlignment="center" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="center" Width="934" Height="456" NavigationUIVisibility="Hidden"/>
</Grid>
Page xmal :
<Page x:Class="WpfApplication3.Page1"
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:WpfApplication3"
mc:Ignorable="d"
d:DesignHeight="456" d:DesignWidth="934"
Title="Page1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<Border BorderBrush="Black" BorderThickness="0.5" Margin="5">-->
<StackPanel Margin="60" Grid.Row="0" Grid.Column="0" >
<StackPanel Orientation="horizontal" Margin="5">
<Label Margin="0,0,100,0">Length</Label>
<TextBox Width ="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,105,0">Width</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,99,0">Weight</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,116,0">Age</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,71,0">Casting Date</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,73,0">Testing Date</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,21,0">Concrete Temperature</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin ="0,0,91,0">Field No.</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
</StackPanel>
<StackPanel Height="30" Width="120" Grid.Row="1" Grid.Column="1" Orientation="Horizontal" Margin="5">
<Button Width="50" Margin="0,0,10,0">Save</Button>
<Button Width="50">Cancel</Button>
</StackPanel>
<!--</Border>-->
</Grid>
For page "WpfApplication3.Page1" remove the
d:DesignHeight="456" d:DesignWidth="934"
and add Height="Auto" and Width="Auto". This will work
You could use a DockPanel as the outer contianer with LastChildFill set to full.
<DockPanel LastChildFill="True">
<Button Content="LastChildFill=True"/>
</DockPanel>
You would replace Button with the control that you want to fill the panel. An added bonus is that you can set other controls to dock on the other sides
<DockPanel LastChildFill="True">
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
</DockPanel>
I got those examples from here and there's more info: http://www.wpftutorial.net/DockPanel.html
How can I check how many lines of the ListView fit in the window (Main Window).
I assume that the window is maximized, and only the system settings determine the size of the window.
ListView is docked in DockPanel with the option FillLastChild.
Does WPF provide mechanisms to automate such a operation?
Regards.
Here is my WPF. I'd like to know how many items fit in "lstBox" in order to control paging using Back and Next buttons.
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="ListBoxTemplate">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=Name}" TextWrapping="Wrap" />
<TextBlock Grid.Column="1" Text="{Binding Path=Value}" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</Window.Resources>
<DockPanel x:Name="MainPanel" LastChildFill="True">
<Grid DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="75*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnNext" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Height="23" Content="Next" HorizontalAlignment="Right" Margin="0,6,0,0" Width="40" />
<Button x:Name="btnBack" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="40" Height="23" Content="Back" Margin="0,6,0,0" />
</Grid>
<ItemsControl x:Name="lstBox" ItemsSource="{Binding}" ItemTemplate="{DynamicResource ListBoxTemplate}" BorderBrush="#FF000000"
BorderThickness="1,1,1,1" VerticalAlignment="Stretch" />
</DockPanel>
</Window>
Arrange everything in the main Grid. In the Grid row or column definitions:
"Auto" makes the Grid cell adjust to the size of the control present in it
"*" is used to handle available free space(left after the creation of other columns or rows).
For a detailed tutorial: http://www.wpf-tutorial.com/panels/grid-units/
You will surely be able to adjust your controls as you desire after reading it
You do not need this listbox template just for paging. WPF offers built-in UI Virtualization. If you need Data Virtualization(paging), you should refer to this:http://www.codeproject.com/Articles/34405/WPF-Data-Virtualization
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>