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?
Related
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 two elements inside a Grid, the first one has a dynamic height and the second has a fixed height. When the user resizes the window the first element is supposed to grow bigger until the scrollbar does not show. Here's the code:
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<ScrollViewer>
<!-- MORE STUFF HERE -->
</ScrollViewer>
</Grid>
<Button Grid.Row="1" Width="126" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
And when it's small looks like this:
When it's big it looks like this:
How can I attached the Button the bottom of the first element, or make the first element stop growing after the content is displayed?
Set the Grid's VerticalAlignment to Top instead of Stretch:
<Grid VerticalAlignment="Top">
...
</Grid>
Please help me in this issue of scroll bar visibility in WPF listview.
I have a listview inside a Content Control.
This Content Control is inside a User Control.
This User Control is inside a TabItem.
The listview has around 12 columns to display, which exceeds the window width.
I tried so many ways to show the horizontal scroll bar in the listview.
Below shown is the XAML of the Outer UserControl [width is not set for this outer usrCrtl]
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" /> // Here I have a custom content control
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<MyCustomContentControl Grid.Row=1 VerticalAlignment="Stretch"......>
<TabControl>
<TabItem Header="One" Name="Tab1">
<my:usrAControl /> // I have listview inside this userctrl
</TabItem>
</TabControl>
<TabControl Header="Two" Name="Tab2" />
</MyCustomContentControl>
</Grid>
Now below is the usrAControl XAML details
<UserControl x:Class="MyProject.MyModule.usrAControl"
MinWidth="640">
// Again inside another custom user control as its child.
<usrBControl>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" /> // here another headers
<RowDefinition Height="*" /> // here my listview placed
</Grid.RowDefinitions>
<ListView ScrollViewer.HorizontalScrollBarVisibility="Auto" Grid.Row="1"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=Width}">
// Around 12 columns which exceeds window width
</ListView>
</Grid>
</usrBControl>
</usrAControl>
I tried with lot of combination.
I initially put a scrollviewer control inside the tabitem and placed usrAControl inside it.
But it did not work.
But I want the listview should show its both scroll bars. Is any way to do it.?
Without seeing more code, my guess would be that the MinSize="640" is your problem: the ListView gets enough space from its container so it doesn't show the scroll, but the container gets clipped.
And you should get rid of the ListView Width binding, it's completely redundant.
i want to add squares to a panel and have them wrapped like the wrap panel.
I then want to make each square horizontally resizable individually, but when it is resized vertically, i need it to affect all the items in it's row.
Basically, I'd want all items in a row to always share the same height, but give the user a method of choosing this height (of course, each row can have its own height, and when squares wrapped to a new row they will need to inherit the new height).
Btw, those "squares" are just user controls or data template applied to a listbox items source. Can i use the same binding on a wrap panel, ad maybe i need to choose a different solution?
Thank you
you can try and put each "rectangle" in a Grid with one row and one column, and then use SharedSizeGroup on the RowDefinition. Be sure to also put Grid.IsSharedSizeScope="True" on the container:
<WrapPanel Grid.IsSharedSizeScope="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Group1" />
</Grid.RowDefinitions>
<Button Height="40" Content="Hello" />
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Group1" />
</Grid.RowDefinitions>
<Button Content="Hello2" />
</Grid>
</WrapPanel>