I am developing a WPF application. In that i have a Grid which has two rows. One row consist of datagrid and other row has some TextBlock to display the detailed view of selected item in DataGrid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="datagrid" Height="8*"></RowDefinition>
<RowDefinition Name="detailedview" Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<my:DataGrid
Grid.Row="0"
x:Name="dataGrid1"
Width="auto"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
AutoGenerateColumns="False" CanUserAddRows="True" Margin="0,0,0,0">
<Grid Grid.Row="2">
<!- Detailed View->
</Grid>
</Grid>
Problem is , I am assigning the ItemSource of the Datagrid to an IEnumerable collection in my code behind.
Row size of the Grid should have the size equal to the number of rows in the datagrid exactly.
Remaining space should be occupied by Detailed view.
When 2 or more rows are added. the height of the row which is having datagrid should expand as such it should accomadate exactly 2 rows and size of detailed view should decrease relatively.
How can I acheive it without harcoding it into 8* and 2*.?
For the datagrid row set Height to Auto and for the deatiled row set height to * as shown below.
<RowDefinition Name="datagrid" Height="Auto"></RowDefinition>
<RowDefinition Name="detailedview" Height="*"></RowDefinition>
Since the datagrid row height is Auto, set the MinHeight property of the Datagrid to some value so that the datagrid occupies more screen space even if there are no records to display. Below I have set the MinHeight to 80.
<my:DataGrid
MinHeight="80"
Grid.Row="0"
x:Name="dataGrid1"
Width="auto"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
AutoGenerateColumns="False" CanUserAddRows="True" Margin="0,0,0,0">
You may also want to set a minimum height to the TextBlock so that it doesn't completely shrink when there are more rows in the datagrid.
You can put you DataGrid into ScrollViewer. Try next markup:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<my:DataGrid ... />
</ScrollViewer>
<TextBlock Height="40" Grid.Row="1" />
</Grid>
Related
I have animated the height of the content of one of my Grid rows so that the row extends downwards when a button is pushed (flyout style from 0 to 80px). This causes the next Grid row to get pushed the same amount downwards and hence out of the window. I am using Prism WPF and the content in the rows are imported via <ContentControl>'s.
I've tried to use Snoop to figure it out, and it looks like the height of the third Grid row does not update when the animation of the first row is fired. The third row contains a <DataGrid> wrapped in a <Grid>.
The outer code looks something like this:
<Grid>
<Grid.RowDefinitions>
<!-- For flyoutButtons -->
<RowDefinition Height="{StaticResource FlyoutButtonRowHeight}"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl prism:RegionManager.RegionName="{x:Static inf:Regions.FlyoutRegion}" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"/>
<ContentControl prism:RegionManager.RegionName="{x:Static inf:Regions.DataGridRegion}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"/>
</Grid>
The animation is defined as a <Grid.Style> element within the first <ContentControl>, and it is triggered via a <DataTrigger>.
So my question is how can I make the height of the last Grid row upate when/after the animation is triggered?
I've been trying to have one canvas with two layers. One layer scrolls horizontally, the second one is on top and scrolls vertically.
In the second layer (the one that scrolls vertically), I stacked a transparent grid (or panel) and a panel with information so that we can see the first layer that is under this one and if we scroll up, we have the information that appears on the screen.
That works like a charm except that if I scroll horizontally, the first layer (the one under) does not scroll at all. It's not a problem if the vertical scrolls does not scroll if we swipe the transparent grid.
This is my xaml
<Canvas x:Name="Canvas">
<local:MyPage x:Name="PageContainer"/> <!--This one scrolls horizontally -->
<ScrollViewer
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Hidden"
Height="{Binding ActualHeight, ElementName=UcRoot}">
<!--This one scrolls vertically and appears on top -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1">
</Grid>
</Grid>
</ScrollViewer>
</Canvas>
I tried many things on the transparent grid (setting width to 1, removing it and setting the information grid margin top to 1200 for example) but the grid captures the event and does not relay to my page.
Can I get some help?
Thanks!
You have to set the background to 'Transparent' to the grid in order to be able to tap on it and swipe.. and you maybe need these properties to play with:
ScrollViewer.VerticalScrollMode
ScrollViewer.HorizontalScrollMode
Although, this is my suggested solutions:
<ScrollViewer ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" >
<Grid >
<TextBlock Text="contnet" />
</Grid>
</ScrollViewer>
<ScrollViewer ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled" >
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" Background="Transparent" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Canvas>
I am using a GridView to display some products.
When I set the DataTemplate I use Width and Height with static values and define some rows for the data I want to display.
<Grid Width="97" Height="180"">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
The first row is for a 80x80 image and the second for the price.So far, so good.
Then I face the problem that even if the data shown (with the name of the product) in the last row, with a TextBlock, is just one line, the GridViewItem takes the value defined from the height property.
Is there a way for the height to adjust on TextBlock's Text. I tried setting Height to Auto, not including at all for the Grid and the TextBlock but then the text is not appearing whole on the screen.
I have a feeling what you want is the text to wrap around. You can achieve this by setting the text to wrap, like in the code demonstrated below:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Red" />
<Grid Grid.Row="1" Background="Blue" />
<TextBlock Grid.Row="2" TextWrapping="Wrap" Text="This is some text which will not fall off the edge because it is set to wrap around, and will continue filling down until the end of the screen because the grid is set to auto" />
</Grid>
Whenever Expander is expanded I would like to shrink grid cell above containing ListBox, so that you can always access every ListItem(if the listbox's grid cell would not shrink, lowest part would be inacessible). To illustrate:
item item *scrollbar*
item -> item *scrollbar*
item expanderItems
expander expander
I found bunch of threads for resizable expander, but none mentioning resizing other content. The problem is, grid containing listbox in 1st row and expander in 2nd with 2nd row Height set to Auto do not resize itself when expander is expanded.
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
I managed to code an ugly workaround using Expanded/Collapsed events:
private void Expander_Expanded(object sender, System.Windows.RoutedEventArgs e)
{
//grid1.Height is named content of expander
this.LayoutRoot.RowDefinitions[1].Height = new GridLength(this.LayoutRoot.RowDefinitions[1].ActualHeight + grid1.Height, GridUnitType.Pixel);
this.LayoutRoot.RowDefinitions[0].Height = new GridLength(1, GridUnitType.Star);
}
What would be the proper way? Preferably with no code behind and more "automated".
EDIT: xaml
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Expander Header="Expander" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Height="23" Panel.ZIndex="1" ExpandDirection="Up" Grid.RowSpan="2" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
<Grid x:Name="grid1" Background="#FF762CF7" Height="100" Margin="0,-100,0,0"/>
</Expander>
<ListBox Margin="0" Background="#19FFFFFF">
<Button Height="150" Width="100"/>
<Button Height="150" Width="100"/>
<Button Height="150" Width="100"/>
</ListBox>
<Grid Margin="0" Grid.Row="1" Background="#FFAEFFAE"/>
<Grid Margin="0" Background="#FFFFD8D8"/>
</Grid>
The main problem you have is setting the Height property of the Expander. It changes its height when you expand it. But if you are setting it, it has to respect the height you gave it and cannot properly expand.
Instead of setting the Height, I would set the MinHeight (or completely remove height constraints, depending on what you want to do).
Additionally you should remove the Margin of the grid inside the expander.
I have a control which contains a devexpress GridControl. I'd like to have a ScrollViewer set up so that when the viewing area is smaller than the minwidth of the GridControl, a horizontal scrollbar will appear. Then as the viewing area is resized, I'd like the scrollbar to disappear when the viewing area is larger than the MinWidth and the GridControl to stretch with the window until MaxWidth is reached at which point the GridControl stops growing. Then, and this is the part that seems so elusive, I'd like to be able to shrink the viewing area again and have the GridControl contract with it until 'MinWidth` is reached and the scrollbar reappears.
So far, I'm only able to achieve the GridControl growing - when the viewing area shrinks the scrollbar appears immediately and the GridControl will never get smaller.
Any ideas?
Edit: This appears to be an issue with the DevExpress GridControl. Here's an example that demonstrates the behavior with Rectangles, a DataGrid and a GridControl:
<UserControl xmlns:dxg="clr-namespace:DevExpress.Xpf.Grid;assembly=DevExpress.Xpf.Grid.v11.2" x:Class="MyNamespace.ScrollViewerTest"
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"
mc:Ignorable="d">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Width="500" Height="200" Fill="AliceBlue" />
<Rectangle Grid.Row="1" MinHeight="200" MaxHeight="400" MinWidth="500" MaxWidth="1000" Fill="Bisque" />
<DataGrid Grid.Row="2" MinWidth="500" MaxWidth="10000" MinHeight="200" MaxHeight="400">
<DataGrid.Columns>
<DataGridTextColumn Header="Column 1" Width="Auto"/>
<DataGridTextColumn Header="Column 2" Width="Auto"/>
<DataGridTextColumn Header="Column 3" Width="Auto"/>
<DataGridTextColumn Header="Column 4" Width="Auto"/>
</DataGrid.Columns>
</DataGrid>
<dxg:GridControl Grid.Row="3" MinWidth="500" MinHeight="200" MaxWidth="1000" MaxHeight="400"/>
</Grid>
</ScrollViewer>
</UserControl>
Notice how the GridControl starts out at MaxWidth and doesn't stretch with the rest of the controls. Also, notice that the vertical resizing works - GridControl sizes up and down as you resize the window (you may have to adjust the MinHeights if you have a smaller monitor). The other controls resize correctly between max and min. The first rectangle is of fixed width and height as a base case.
This seems to work for me (I substituted a ListBox rather than getting the GridControl):
<ScrollViewer HorizontalAlignment="Stretch" Name="scrollViewer1" VerticalAlignment="Stretch" Margin="8" HorizontalScrollBarVisibility="Auto">
<ListBox Name="listBox1" MinWidth="400" MaxWidth="600" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ScrollViewer>