How can i stretch horizontally "SecondGrid"?
<Window x:Class="WpfApplication2.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">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Left" Grid.Column="0" />
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="Righkk" Grid.Column="2" Margin="5,0,-5,0" />
<Grid Name="SecondGrid" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<GridSplitter
ResizeDirection="Rows"
Grid.Row="1"
Width="Auto"
Height="3"
Background="#FFBCBCBC"
HorizontalAlignment="Stretch"
/>
<ListBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"/>
<WebBrowser Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Label Content="Right" Grid.Row="2" />
</Grid>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ToolBarTray DockPanel.Dock="Top">
<ToolBar>
<Button Command="New" Content="New" />
<Button Command="Open" Content="Open" />
<Button Command="Save" Content="Save" />
</ToolBar>
</ToolBarTray>
<TreeView>
<TreeViewItem Header="Level 1" IsExpanded="True">
<TreeViewItem Header="Level 2.1" />
<TreeViewItem Header="Level 2.2" IsExpanded="True">
<TreeViewItem Header="Level 3.1" />
<TreeViewItem Header="Level 3.2" />
</TreeViewItem>
<TreeViewItem Header="Level 2.3" />
</TreeViewItem>
</TreeView>
</StackPanel>
</Grid>
i just had to remove
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Related
What is the right way to display columns in a tree view, that auto align their width to the width of the content.
The problem that I see is, that each TreeViewItem is independent and therefor I don't know how to tell that eg the date column in every TreeViewItem shall have the same width, but depending on the TreeViewItem with the widest date string?
<TreeView Name="treeView" TreeViewItem.Expanded="TreeViewItem_Expanded" AutomationProperties.IsColumnHeader="True" AutomationProperties.IsRowHeader="True" AllowDrop="True" VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling">
<TreeViewItem>
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label>2.3.00</Label>
<Label Grid.Column="2">Something</Label>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label>22.03.2000</Label>
<Label Grid.Column="2">Something 2</Label>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
Use a SharedSizeGroup
<TreeView Name="treeView" Grid.IsSharedSizeScope="True" TreeViewItem.Expanded="TreeViewItem_Expanded" AutomationProperties.IsColumnHeader="True" AutomationProperties.IsRowHeader="True" AllowDrop="True" VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling">
<TreeViewItem>
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Label>2.3.00</Label>
<Label Grid.Column="2">Something</Label>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Label>22.03.2000</Label>
<Label Grid.Column="2">Something 2</Label>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
Note the attribute Grid.IsSharedSizeScope="True" in the TreeView and the SharedSizeGroup="A" in the Column Definitions
Here's my code:
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Headers" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="Tags" />
<ItemsControl Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Path=AllHeaders.Fields}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" />
<ComboBox ItemsSource="{Binding ElementName=SourceGrid, Path=DataContext.Tags}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
As you can see, I have a TextBlock and a ComboBox inside of a DataTemplate, which is inside of a StackPanel. What I want to do is put TextBlock in Column=0 of my grid, and a ComboBox into Column=1 of my grid. How can I do that? Grid.Column property is inaccessible in both TextBlock and ComboBox.
this is your new layout:
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Headers" />
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="Tags" />
<ItemsControl Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding Path=AllHeaders.Fields}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}"
Grid.Column="0" />
<ComboBox ItemsSource="{Binding Path=DataContext.Tags, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid},AncestorLevel=2}}"
Grid.Column="1" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
or
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Headers" />
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="Tags" />
<ItemsControl Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding Path=AllHeaders.Fields}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}"
Grid.Column="0" />
<ComboBox ItemsSource="{Binding Path=DataContext.Tags, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ItemsControl}}}"
Grid.Column="1" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
I have been trying to adjust the screen based on different sizes to see if any components are reacting to that. Unfortunately they don't
I am not sure what I am missing. And it would be great if anyone can give a direct advice and tips for my example implementation.
Here is the code:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="1000" Width="800">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListViewItem Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch">
<Grid Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="1" Grid.Row="0" Content="HJello World meeee"/>
<ListView Grid.Column="3" Grid.Row="0" Grid.RowSpan="4">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<Button Content="Hello Tourist fu"/>
<Button Content="Hello Tourist fu"/>
<Button Content="Hello Tourist fu"/>
<Button Content="Hello Tourist fu"/>
<Button Content="Hello Tourist fu"/>
<ListViewItem Content="Test"/>
</ListView>
<Button Grid.Column="4" Grid.Row="0" Content="Test"/>
</Grid>
</Expander>
</Grid>
</ListViewItem>
<ListViewItem Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4">
<Expander >
<Grid Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="1" Grid.Row="0" Content="HJello World meeee"/>
<ListView Grid.Column="3" Grid.Row="0" Grid.RowSpan="4">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<Button Content="Hello Tourist fu"/>
<Button Content="Hello Tourist fu"/>
<Button Content="Hello Tourist fu"/>
<Button Content="Hello Tourist fu"/>
<Button Content="Hello Tourist fu"/>
<ListViewItem Content="Test"/>
</ListView>
<Button Grid.Column="4" Grid.Row="0" Content="Test"/>
</Grid>
</Expander>
</ListViewItem>
</ListView>
</Grid>
</Window>
Set x:Name for your main grid to x:Name="Root"
Set for Expander attribute Width="{Binding ActualWidth, ElementName=Root}"
I have a problem whereby I need to remove data from a DataGrid whenever a TabItem header is clicked (i.e. a new tab has been selected). Problem is, that by using a SelectionChanged is that the event is fired when the DataGrid is clicked on as well.
I tried finding different solutions, like using a label inside the TabItem.Header (per another thread on SO), but that caused it to loose the style used by (Metro MaHapps). I tried MouseLeftButtonDown, but that doesn't trigger on TabItem.
So is there any other event I can use?
Sample code:
<Controls:MetroAnimatedSingleRowTabControl Grid.Row="1">
<TabItem Header="shifts">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DataGrid Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="5" Name="ShiftGridView" />
<Button Style="{DynamicResource SquareButtonStyle}" Width="100" Height="35" Content="Start shift" Grid.Column="2" Grid.Row="2" Click="StartButton_Click" />
<Button Style="{DynamicResource AccentedSquareButtonStyle}" Width="100" Height="35" Content="Stop shift" Grid.Column="4" Grid.Row="2" Click="StopButton_Click" />
</Grid>
</TabItem>
<TabItem Header="stats">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.40*" />
<RowDefinition Height="0.40*" />
<RowDefinition Height="0.40*" />
<RowDefinition Height="0.40*" />
<RowDefinition Height="3*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Dates"
FontSize="14"
VerticalAlignment="Bottom"
Grid.Row="0" Grid.Column="1"/>
<DatePicker Width="120" Height="30"
HorizontalAlignment="Left"
FontSize="14"
Controls:TextboxHelper.Watermark="Start date"
Grid.Row="1" Grid.Column="1" Name="StartDatePicker" />
<DatePicker Width="120" Height="30"
HorizontalAlignment="Left"
FontSize="14"
Controls:TextboxHelper.Watermark="Stop date"
Grid.Row="2" Grid.Column="1" Name="StopDatePicker" />
<TextBlock Text="Name"
FontSize="14"
VerticalAlignment="Bottom"
Grid.Row="0" Grid.Column="2"/>
<ComboBox Width="200" Height="30"
HorizontalAlignment="Left"
SelectedIndex="0"
Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Name="NameComboBox"/>
<DataGrid Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="5" Name="StatsGridView" />
<Button Style="{DynamicResource SquareButtonStyle}" Width="100" Height="35" Content="Show stats" HorizontalAlignment="Right" Grid.Column="3" Grid.Row="5" Click="ShowStatsButton_Click" />
<Button Style="{DynamicResource AccentedSquareButtonStyle}" Width="100" Height="35" Content="Print stats" Margin="10,0,0,0" HorizontalAlignment="Left" Grid.Column="4" Grid.Row="5" Click="PrintButton_Click" />
</Grid>
</TabItem>
</Controls:MetroAnimatedSingleRowTabControl>
SelectionChanged is Routed event that's why it routes from DataGrid to parent TabControl.
To distinguish between the events you can check e.OriginalSource which tells the actual element which is responsible for raising event.
private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// Sender will always be your TabControl.
// So, just check if OriginalSource is same as sender (TabControl).
if (e.OriginalSource == sender)
{
// Put your code here.
}
}
I currently have a WrapGrid bound to an ObservableCollection of BitmapImages. What I wish is for these to be displayed, 4 items per row, extending downwards - and when the WrapGrid extends past the size of the users screen, allow the user to scroll downwards. Currently it is working - but no scrollbar appears and the user is unable to scroll downwards - so whenever it extends beyond the screen, the images are cut off and useless.
I believe something must be incorrect in how I have defined my grids ; but for the life of me I cannot figure out what I have done incorrectly after hours of searching.
Here is my code :
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="backButton"
Click="GoBack"
IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
Style="{StaticResource BackButtonStyle}" />
<TextBlock x:Name="pageTitle"
Grid.Column="1"
Text="Image Gallery"
Style="{StaticResource PageHeaderTextStyle}" />
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid Margin="120,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
<ItemsControl Name="listOfImages" ItemsSource="{Binding Path=Images}" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="5" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Stretch="Fill" Width="200" Height="200" Source="{Binding}" Margin="10,10,10,0" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Grid>
I thought this stuff was set by default but may not be the case, so this may prove useful.
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
CanVerticallyScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ItemsPanelTemplate>