ItemsControl Height Issue - wpf

I am trying to have the height of an itemscontrol be set to what is defined in the grid row definitions. If I set the Height on the itemscontrol manually, it of course affects the control. How can I bind to or achieve this behavior? I just want my itemscontrol size to be determined by the grid. Thanks!
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="600"/>
<RowDefinition Height="500"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ItemsControl Grid.Row="1" Grid.Column="0" Name="MIPRegion" cal:RegionManager.RegionName="MIPRegion" />
</Grid>
</ScrollViewer>

You can bind to the ActualHeight property of the RowDefinition.
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="rowDef0" Height="600"/>
<RowDefinition x:Name="rowDef1" Height="500"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ItemsControl Height="{Binding Path=ActualHeight, ElementName=rowDef1}"
Grid.Row="1" Grid.Column="0" Name="MIPRegion"
cal:RegionManager.RegionName="MIPRegion" />
</Grid>
</ScrollViewer>

Try this
I havent use Actualheight and actualwidth for binding as Width and height itself is of type GridLength.
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="600"/>
<RowDefinition x:Name="RowHeight" Height="500"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="ColumnWidth"/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Row="1" Background="Green" Width="{Binding ElementName=ColumnWidth,Path=Width}" Height="{Binding ElementName=RowHeight,Path=Height}" Grid.Column="0" Name="MIPRegion" >
</ItemsControl>
</Grid>
</ScrollViewer>

In my case RowDefinition's Height was set * and it only worked when I bound the ItemsControl.Height to the Height property, not the ActualHeight. I then realized that such a binding between double and GridLenght is not correct.
(Value produced by BindingExpression is not valid for target property.; Value='*' BindingExpression:Path=Height;) But still I confirm that in some case binding to the ActualHeight is not working as expected.

Related

WPF: auto resize ListView width according Window size

So i have this ListView inside TabControl:
<TabControl>
<TabItem Width="70" Height="70" Margin="0,0,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<ListView>
...
</ListView>
</Grid>
<Grid>
</Grid>
</Grid>
</TabItem>
</TabControl>
My window ResizeMode is CanResizeWithGrip and when i resize my application i want my ListView to auto resize to according my Window width.
I try to define my ListView HorizontalAlignment Stretch bu when my application width changed my ListView with not.
I believe since your ListView is nested within other controls, those controls would need their HorizontalAlignment set to Stretch. I'm on my phone right now so I'll try out your XAML on my system when I get home and update my answer if I find something else is the culprit.
Edit: I've copied your code into VS and its stretching properly for me. I don't have any contents to check but if I set
<TabControl>
<TabItem Width="70" Height="70" Margin="0,0,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<ListView Background="Black">
</ListView>
</Grid>
</Grid>
</Grid>
</Grid>
</TabItem>
</TabControl>
I can see that the control is in fact stretching when I resize the window. Now I'm unsure of what the issue you are running into is. Any chance you could post more details?

WPP vertical scrollViewer is not apprearing

I have a wpf user control which has Grid with row definitions as Auto. and controls defined in that in grid. Outside of this this i have scroll viewer VerticalScrollBarVisibility as set to Auto.
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name" />
<telerik:RadRichTextBox Name="Name" Grid.Row="0" Margin="2"
Padding="0" HorizontalAlignment="Left" AcceptsReturn="True"
Height="500" Width="750" DocumentInheritsDefaultStyleSettings="True" FontFamily="Calibri" FontSize="13">
<telerik:RadRichTextBox.Document>
<telerik:RadDocument LineSpacingType="AtLeast" LineSpacing="0"
ParagraphDefaultSpacingAfter="0" ParagraphDefaultSpacingBefore="0">
</telerik:RadDocument>
</telerik:RadRichTextBox.Document>
</telerik:RadRichTextBox>
</Grid>
</ScrollViewer>
I am loading the above control as content of Rad tab item from another view.
I could not able to view vertical scroll bar when i resize the window.
You can do this
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
......
<telerik:RadRichTextBox Grid.Row="1" ......
/>

WPF: Inner content wont scroll

I have a Window with a Grid inside:
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="70" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{Binding ChildViewModel.View}" />
<DockPanel Grid.Row="1" Visibility="{Binding SearchResultViewVisibility}">
<GridSplitter DockPanel.Dock="Top" Background="LightGray" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsTabStop="False"/>
<Views:SearchResultView DataContext="{Binding SearchResultViewModel}" />
</DockPanel>
<UserControls:GradientBackgroundControl Grid.Row="2" Height="25">
<Validators:FocusSummaryControl x:Name="FocusSummary" ValidateOnlyFocusedElement="False" />
</UserControls:GradientBackgroundControl>
</Grid>
The ContentControl gets a UserControl with this Grid set:
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.ColumnSpan="4">
<StackPanel>
...
</StackPanel>
</ScrollViewer>
The problem now is, that the ScrollViewer in the UserControl doesn't scroll. The content of the UserControl set to the ContentControl is heigher and the overflow ist just hidden.
If I am not wrong, StackPanel requires a Height to be set for scroll functionality to work because StackPanel, by design, grows in one direction (based on Orientation).
To confirm whether this is the cause of your problem, please test by setting the height of StackPanel to a fixed height. Alternately, you may want to replace the StackPanel with say DockPanel and see the behaviour. Also there is a ScrollViewer.CanContentScroll property that you may want to fiddle with.
Let us know the result of this test.
I think you need to rearrange things a little bit. My suggestions (I'm sure there are infinite variations that would work):
First, add a new row to your grid (Height="Auto") and set the height of your top row (with your ContentControl in it) to "*"
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
Second, move your GridSplitter out of the DockPanel. Put the splitter in row 1 and the dockpanel in row 2.
<ContentControl Grid.Row="0" Content="{Binding ChildViewModel.View}" />
<GridSplitter Grid.Row="1" Background="LightGray" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsTabStop="False" ResizeBehavior="PreviousAndNext"/>
<DockPanel Grid.Row="2" Visibility="{Binding SearchResultViewVisibility}">
<Views:SearchResultView DataContext="{Binding SearchResultViewModel}" />
</DockPanel>
Note that you'll probably also have to set the ResizeBehavior for your GridSplitter as shown above. I hope this will get you close to what you want.

Silverlight Grid does not fill

I have Border control defined like so:
<Border Background="Azure" Grid.Row="2">
<ContentControl Width="Auto" Height="Auto" Regions:RegionManager.RegionName="MainContent" />
</Border>
I can see Azure background in whole area
Now I inject my view into this ContentControl (it's PRISM). View looks like this..
<toolkit:BusyIndicator IsBusy="{Binding IsBusy}">
<Grid Margin="10" DataContext="{Binding}"
infBehaviors:RegionPopupBehaviors.CreatePopupRegionWithName="ViewPopup"
infBehaviors:RegionPopupBehaviors.ContainerWindowStyle="{StaticResource PopupStyle}">
<!--Define rows in a grid-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Define columns in a grid-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Now when I place new UserCOntrol on top of my Grid - I expect it to cover whole "Azure" area. But I only see overlay with size of my data entry form. It seems that second grid does not "fill" ContentControl - only takes as much space as needed. How do I force it to fill? I set Auto column and row - thinking they will stretch but no..
EDIT:
Screenshot from Silverlight Spy.. It shows that ContentControl from Shell covers whole area but grid inside totally ignores my "*" sizes. Also it does work in design mode - it stretches to whole design area...
Make sure you have HorizontalContentAlignment and VerticalContentAlignment of the ContentControl set to Stretch. ^_^
e.g.
<Border Background="Azure" Grid.Row="2">
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Width="Auto" Height="Auto" Regions:RegionManager.RegionName="MainContent" />
</Border>

WPF - Bind to selecteditem of listbox between user controls

I have two usercontrols, the first with a listbox that is bound to a list of Customers that displays some simple details for each customer.
The second user control I would like to be a more detailed view of whichever customer is selected in the listbox of the first usercontrol.
Is it possible to set up a binding in the second control to bind to the selected item in the first user control?
My List box:
<ListBox Name="lstCustomer" ItemsSource="{Binding Customers}" >
<ListBox.Resources>
<DataTemplate DataType="{x:Type MyApplication:Customers}">
<Label Grid.Row="0" Content="{Binding Customer.name}" FontSize="14" FontWeight="Bold" Padding="5" />
<Label Grid.Row="1" Grid.Column="0" Content="{Binding Customer.telephone}" Padding="10,5" />
</Grid>
</Grid>
</DataTemplate>
</ListBox.Resources>
</ListBox>
Detailed view Usercontrol (So Far)
<Grid x:Name="containingGrid" DataContext="{Binding ElementName=lstCustomers, Path=SelectedItem}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Customer.name}" FontSize="23"/>
</Grid>
Thanks
Greg
I would suggest to have a property in your ViewModel of Customer object say SelectedCustomer and bind it to the SelectedItem of your listbox like this -
<ListBox Name="lstCustomer" ItemsSource="{Binding Customers}"
SelectedItem = "{Binding SelectedCustomer}" >
. . . . .
</ListBox>
Since you mentioned that both user controls are in same view, so i am assuming that they share a same ViewModel. In that case you can simply set the data context this way -
<Grid x:Name="containingGrid" DataContext="{Binding SelectedCustomer}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" FontSize="23"/>
</Grid>
Yes, you can - if you give the listbox a name of CustomerList then you can bind to its SelectedItem property using a binding like "{Binding ElementName=CustomerList, Path=SelectedItem}".

Resources