I have a grid with three rows, where I have a checkbox on the first row, and some other controls on the last.
I want the last controls to only be enabled when the checkbox is enabled.
I tried the example below, but it's not working. Is there an easier way to do this, or do I have to write "IsEnabled=..." on every single control on the last row?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" IsEnabled="{DataBinding:DataBinder FooProperty}"/>
</Grid.RowDefinitions>
<Checkbox Grid.Row=0 IsChecked="{DataBinding:DataBinder FooProperty}" ...../>
<Label Grid.Row="2" ...../>
<Slider Grid.Row="2" ...../>
</Grid>
Setting the IsEnabled property on a Grid's Row doesn't enable/disable the controls assigned to it since they're not Children elements of that row. However, if you put the in any layout (StackPanel, Grid, WrapPanel, etc.) and bind the IsEnabled property of that layout, the children controls will be affected.
Here's an example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Row="0"/>
<StackPanel Grid.Row="2" IsEnabled="{DataBinding:DataBinder FooProperty}">
<Label Content="Label"/>
<Slider />
</StackPanel>
</Grid>
Related
I have a WPF Window which has a Tab Control, in the third row of Grid, which contains a DataGrid. The DataGrid is being populated with data from EF and when the data is loaded, the DataGrid is going beyond the bounds of the window.
I've tried various solution (e.g. setting the Vertical/Horizontal Alignments to Stretch) but nothing I have tried worked. Below is a snippet of code up to the first open tag of the DataGrid (there are actually three tabs each with a DataGrid, but they are all the same, just bound to a different data source). With the below XAML, the width binds correct (i.e. the DataGrid doesn't go beyond the right side of the window) but the horizontal part of the DataGrid does go beyond the bottom of the window:
<Grid Margin="5,0,5,0" Background="Blue" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<user_controls:Spinner x:Name="spinner" Grid.RowSpan="3" Panel.ZIndex="1000"/>
<Menu Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<MenuItem Header="Exit" Click="Exit_Click"/>
<MenuItem Header="Save" Command="{StaticResource SaveCommand}"/>
</Menu>
<GroupBox Grid.Row="1" Header="Server Type" Margin="610,0,0,0">
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Right">
<RadioButton x:Name="rbTestServer" GroupName="ServerType" Content="TEST" Foreground="Red" IsChecked="true" Checked="ServerType_Checked"/>
<RadioButton x:Name="rbProductionServer" GroupName="ServerType" Content="PRODUCTION" Foreground="Green" Margin="10,0,10,0" Checked="ServerType_Checked"/>
</StackPanel>
</GroupBox>
<TabControl x:Name="tcTables" BorderBrush="Red" BorderThickness="5" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="371" Height="auto" MinWidth="782" Width="auto" SelectionChanged="TcTables_SelectionChanged">
<TabItem x:Name="tiChargeType" Header="Charge Type">
<DataGrid x:Name="dgChargeType" Background="#FFE5E5E5" AutoGenerateColumns="False" EnableRowVirtualization="True" ItemsSource="{Binding Source={StaticResource vsChargeType}}" Margin="2,10,10,10" RowDetailsVisibilityMode="VisibleWhenSelected" CellEditEnding="CellEditEnding">
Any help/suggestions would be greatly appreciated.
Thank You
You have three rows in your grid:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Because the third is set to Auto height, it tells it's content to go as big as it likes.
This is the cause of your problem.
Change that to:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Then your tab control and hence the datagrid in it will have a height limited to whatever is left after rows 0 and 1.
I have two grids horizontally and i want to resize the first grid horizontally. so i used Grid Splitter like below,
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition MinHeight="5"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DataGrid ItemsSource="{Binding ItemsCollection}" AutoGenerateColumns="True"/>
<GridSplitter Grid.Row="1" Height="3" HorizontalAlignment="Stretch" Background="Red" />
<DataGrid Grid.Row="2" ItemsSource="{Binding ItemsCollection}" AutoGenerateColumns="True"/>
</Grid>
now i'm able to resize it . but i could resize it fully(to the header of a grid). i want to set limit to resizing. i dont want to hide entire grid by resizing. i want to show header and first row always.
I have checked your scenario and Height="Auto" won't work. I have updated grid rows definition. please check below.
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="100"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*" MinHeight="100"/>
</Grid.RowDefinitions>
<DataGrid ItemsSource="{Binding ItemsCollection}" AutoGenerateColumns="True"/>
<GridSplitter Grid.Row="1" Height="3" HorizontalAlignment="Stretch" Background="Red" />
<DataGrid Grid.Row="2" ItemsSource="{Binding ItemsCollection}" AutoGenerateColumns="True" />
</Grid>
I have the following code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" TextBlock.Foreground="Blue" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="test" Grid.Row="0" />
<TextBlock Text="test" Grid.Row="2" />
</Grid>
<Grid Grid.Row="1" TextBlock.Foreground="Red" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="test" Grid.Row="0"/>
<TextBlock Text="test" Grid.Row="2"/>
</Grid>
</Grid>
It's simply two equal grids with three rows, all three which should be of equal size (each in its own grid, that is).
The bottom grid, contained in the parent row with a height of "*" behaves as expected. Each row is of equal size, regardless of what is put into it.
But the top grid, contained in a row with height Auto, seems to discard the Height="*", and behave as if they had Height="Auto". The first and third row gets exactly the height they ask for, and the second, the empty row, is just given a height of 0. Is this normal behaviour? And if so, why is it the way it is?
This is how it appears:
And this is how I would expect it to work:
This behaviour is expected. Height="*" means that all rows will share evenly available space
The value is expressed as a weighted proportion of available space
When you set parent row height to auto it means that child Grid is not stretched vertically any more so there is no free space to share so rows will take only as much space as they need to. It's like you would set VerticalAlignment="Top" for example.
You can achieve what you want by using SharedSizeGroup on the top Grid. In this scenario all rows belong to the same group and all will share same height
<Grid Grid.Row="0" IsSharedSizeScope="True" TextBlock.Foreground="Blue" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="CommonRow"/>
<RowDefinition SharedSizeGroup="CommonRow"/>
<RowDefinition SharedSizeGroup="CommonRow"/>
</Grid.RowDefinitions>
<TextBlock Text="test" Grid.Row="0" />
<TextBlock Text="test" Grid.Row="2" />
</Grid>
it behaves is normally.
when you set Height="*" that means fill the rest of space, while Height="Auto" means fit to all inner controls. so the first row is fitting all the controls that you have which they are only two, and because there is no Height property set to first inner grid or TextBlocks it takes only the height that equal yourFirstTextBlock.Height + yourSecondTextBlock.Height.
I'm really new to XAML and Metro and my old HTML skills are not in my advance.
What i want to achive is to have 3 "rows", the top row as some kind of header, the last row as some kind of footer and then a scrollable content area in the middle.
How can I achive this in XAML for Metro?
I've tried the StackPanel but I can't get the middle one to stop expanding and putting my "footer" out or the screen.
read more about WPF Layouts,
Grid in WPF is similar to Table in HTML, you should do this if you want header and footer.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/> <!--Header-->
<RowDefinition/>
<RowDefinition Height="50"/> <!--Footer-->
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Header"></TextBlock>
<ScrollViewer Grid.Row="1">
<!--your Controls-->
</ScrollViewer>
<TextBlock Grid.Row="2" Text="Footer"></TextBlock>
</Grid>
Try this,
<Grid x:Name="GridName">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Header"/>
<StackPanel Orientation="Vertical" Grid.Row="1">
<!-- Other Controls -->
</StackPanel>
<TextBlock Grid.Row="2" Text="Footer" />
</Grid>
The Grid at the bottom contains a ListBox. It stretches vertically, but the scrollbar does not appear when it reaches the bottom.
Layout --
<RibbonWindow ResizeMode="CanResize">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel>
<Ribbon ... />
<ListBox
VerticalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
/>
</StackPanel>
</Grid>
</RibbonWindow>
I have heard that StackPanels can cause this behavior, but replacing it with a Grid causes its own set of issues.
EDIT --
This Layout works -
<RibbonWindow ResizeMode="CanResize">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Ribbon Grid.Row="0" />
<ListBox Grid.Row="1"
VerticalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
/>
</Grid>
</RibbonWindow>
Turns out I needed the Grid.Row="x" tags, and then I could remove the StackPanel, and everything worked.