I have this window:
My problem is that when the number is larger than 2 digits, it pushes the red rectangle to
the right. and I would like it to act like that:
The rectangle must not been pushed to the right.
This is my XAML:
<StackPanel>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<TextBlock Text="1" VerticalAlignment="Top" />
<Rectangle Width="20" Height="20" Fill="Red" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Border>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1" >
<TextBlock Text="1123" VerticalAlignment="Top" />
<Rectangle Width="20" Height="20" Fill="Red" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Border>
</StackPanel>
<StackPanel>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="1" VerticalAlignment="Top" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right"/>
<Rectangle Width="20" Height="20" Fill="Red" Grid.Column="1" Grid.Row="0"/>
<TextBlock Text="1123" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right"/>
<Rectangle Width="20" Height="20" Fill="Red" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
</StackPanel>
Related
I'm creating a table presentation out of WPF grid system. I can create the table though but my issue in the Merchandise portion is, as the Non-Merchandise grow taller, the data in Merchandise will vertically center even if I already set VerticalAlignment="Top". The same issue with the Tender column. See the following image showing result.
<Grid Grid.Column="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" Background="Aqua">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Merchandise" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" />
<TextBlock Text="Amount" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5" />
<TextBlock Text="Sales" Grid.Row="2" Grid.Column="0" VerticalAlignment="Top" />
<TextBlock Text="25,887.22" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Background="Aquamarine">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Non-Merchandise" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
<TextBlock Text="Type" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Margin="5"/>
<TextBlock Text="Amount" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5"/>
<TextBlock Text="Gift Card" Grid.Row="2" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="3" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="4" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="5" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="6" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="7" Grid.Column="0" />
</Grid>
<Grid Grid.Column="2" Grid.Row="0" Background="AliceBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Tender" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalAlignment="Center" />
<TextBlock Text="Description" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Margin="5"/>
<TextBlock Text="Begin Amt" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5"/>
<TextBlock Text="Trx Amt" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Margin="5"/>
<TextBlock Text="Removed" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</Grid>
A simple trick is to add an extra row at the bottom and set Height="*" while setting existing rows Height="Auto". That way, existing rows will be pushed up to the top.
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I have the following XAML, which I have tried to simplify and removed irrelevant code such as name, content, bindings etc.
The problem is that the textbox on the right is not very nicely aligned. I expect the textboxes to be aligned so they are of equal width.
XAML code:
<StackPanel Grid.Row="1" Grid.RowSpan="2" Grid.Column="1" MinWidth="200" HorizontalAlignment="Right">
<GroupBox >
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69"/>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="2" Grid.Row="0" Margin="5,7" VerticalAlignment="Center"/>
<Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="2" Grid.Row="1" Margin="5,7" VerticalAlignment="Center"/>
<ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</StackPanel>
I have tried a lot of different combinations but can't get it to as I want for my end goal.
You can specify on the Grid above the Itemscontrol: Grid.IsSharedSizeScope='True'.
Then, in the DataTemplate for item, specify on the first ColumnDefinition:
SharedSizeGroup='LabelsColumn(or any name you like)'.
That will recalculate automatically the width of the first column, to be as long as the longest text/Label(in this scenario).
Example:
<StackPanel Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1"
MinWidth="200"
HorizontalAlignment="Right">
<GroupBox>
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="5" />
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Labels"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5,7"
VerticalAlignment="Center" />
<Label Grid.Column="0"
Grid.Row="1"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="1"
Margin="5,7"
VerticalAlignment="Center" />
<ItemsControl Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Labels"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</StackPanel>
My code is as follows:
<Grid
ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="5"
Background="Purple"
HorizontalAlignment="left" />
<ListBox
Grid.Row="0"
Grid.Column="0"
ItemsSource="{Binding Tests}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Text="{Binding Name}"
Grid.Column="0">
</TextBlock>
<Image
Grid.Column="1">
</Image>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock
Grid.Row="0"
Grid.Column="1"
Text="{Binding CommandPromptOutput}">
</TextBlock>
<Button
Grid.Row="1"
Grid.Column="2"
Content="Run" VerticalAlignment="Bottom" HorizontalContentAlignment="Center" HorizontalAlignment="Stretch" />
</Grid>
The grid splitter is showing up but it has no control over resizing anything.
I have also tried adding:
<GridSplitter
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="5"
Background="Purple"
HorizontalAlignment="left"
ResizeDirection="Columns"
ResizeBehavior="PreviousAndNext" />
This has to be super simple and just missing it. I have an AutoComplete box and it is not filling the entire space of the box;
The yellow box is added to the image not part of the actual program. The border for each row is added to visually see the space each is taking. Here is the XML for DataTemplate;
<Border Height="Auto" BorderBrush="Black" BorderThickness="1" >
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0">
<TextBlock Text="Description:" Foreground="Gray" Margin="2,0,2,0" />
<TextBlock Text="Item ID:" Foreground="Gray" Margin="2,0,2,0" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock Text="{Binding Descrip}" Margin="2,0,2,0" />
<TextBlock Text="{Binding ItemID}" Margin="2,0,2,0" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0">
<TextBlock Text="Department ID:" Foreground="Gray" Margin="2,0,2,0" />
<TextBlock Text="Class ID:" Foreground="Gray" Margin="2,0,2,0" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock Text="{Binding DepartmentID}" Margin="2,0,2,0" />
<TextBlock Text="{Binding ClassID}" Margin="2,0,2,0" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="3" HorizontalAlignment="Right">
<TextBlock Margin="2,0,0,2" FontSize="16" FontWeight="Bold" >
<Run Text="$" />
<Run Text="{Binding Price}" />
</TextBlock>
</StackPanel>
</Grid>
</Border>
Thanks to #gomi42 this worked;
<Style x:Key="autoBoxStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
Bars move, but the content does not scroll.
Any ideas?
I want to create a work schedule
<Window x:Class="WpfMiGantt.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" xmlns:my="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon">
<Grid ShowGridLines="True">
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<Border Width="1000" Height="1000"/>
</ScrollViewer >
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" ShowGridLines="True" >
<Grid.ColumnDefinitions >
<ColumnDefinition Width="60" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<my:RibbonTextBox Height="23" Label="6:00" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox0" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="6:30" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox1" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="7:00" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox2" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="7:30" Grid.Column="3" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox3" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="8:00" Grid.Column="4" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox4" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="8:30" Grid.Column="5" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox5" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="9:00" Grid.Column="6" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox6" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="10:00" Grid.Column="7" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox7" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="10:30" Grid.Column="8" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox8" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="11:00" Grid.Column="9" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox9" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="11:30" Grid.Column="10" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox10" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="12:00" Grid.Column="11" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox11" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="12:30" Grid.Column="12" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox12" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="13:00" Grid.Column="13" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox13" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="13:30" Grid.Column="14" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox14" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="14:00" Grid.Column="15" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox15" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="14:30" Grid.Column="16" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox16" VerticalAlignment="Center" />
<my:RibbonTextBox Height="23" Label="15:00" Grid.Column="17" Grid.Row="0" HorizontalAlignment="Left" Margin="0" Name="ribbonTextBox17" VerticalAlignment="Center" />
</Grid>
<my:RibbonButton Label="Fecha" Grid.Column="0" Grid.Row="0" Content="Button" Height="30" HorizontalAlignment="Center" Margin="0" Name="ribbonButton0" VerticalAlignment="Center" Width="Auto" />
<my:RibbonButton Label="" Grid.Column="0" Grid.Row="1" Content="Button" Height="30" HorizontalAlignment="Center" Margin="0" Name="ribbonButton1" VerticalAlignment="Top" Width="75" />
<my:RibbonButton Content="Button" Grid.Column="2" Grid.ColumnSpan="2" Height="23" HorizontalAlignment="Left" Margin="38,8,0,0" Name="ribbonButton2" VerticalAlignment="Top" Width="75" />
</Grid>
</Grid>
</Window>
I think the order of the lines is the key.
PD: Have you seen any similar project in codeplex or with WPF? 4
I suspect you want the scroll bars to act on the Grid. You will have to have the Grid in the ScrollViewer in that case
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<Grid ShowGridLines="True" Width="1000" Height="1000">
...rest of grid content
</Grid>
</ScrollViewer >