I have a DataGrid in a UseraControl. In a separate UserControl I have a frame pointing to the UserControl with the DataGrid. When the application runs, the datagrid is shown in the frame. but the Datagrid's scrollbars are not visible. Not in the conventional sence anyways.
If I place the frame in this mannor, it show the scroll bars.
d:DesignHeight="768" d:DesignWidth="1366">
<Grid DataContext="{Binding Source={x:Static app:detailsSQL.Instance}}">
<Frame ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True" Source="/content/membership/members/details/tabs/grid.xaml"/>
</Grid>
However if i do this, the scroll bars dissapear, although it's still very capable of scrolling with the mouse wheel.
d:DesignHeight="768" d:DesignWidth="1366">
<Grid DataContext="{Binding Source={x:Static app:detailsSQL.Instance}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="1" Source="/content/membership/members/details/tabs/grid.xaml"/>
</Grid>
Even if I don't put the Frame in a GridColumn, it still won't show the scroll bars. Is there a reason why it's this sensitive?
Scrollbar will only show if the available area to draw the control is more than the allocated area. Here you can put a scrollbar around the grid in your usercontrol.
or if you are intending to make your usercontrol itself scrollable then you might consider to put it around the frame.
eg:
<ScrollViewer Height="",Width="">
<Frame Grid.Column="1" Source="/content/membership/members/details/tabs/grid.xaml"/>
</ScrollViewer>
and try giving your ScrollViewer a size .
Related
Im relatively new to WPF so I'm sorry in advance if there is a simple solution to this. However, I am trying to bind the height of a StackPanel to its containing Grid. I understand that a StackPanel automatically resizes to fit its elements but I would like to bind it to the Grid so that it does not do this. Right now the stack panel does not resize with the window since it remains the
size it needs to be in order to fit its elements.
Here is what I have so far:
<Grid x:Name="MainGrid" Grid.Row="2" Margin="1" Drop="Grid_Drop"
AllowDrop="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="175"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="SidePanel" Grid.Column="0" Height="{Binding
ActualHeight, ElementName=MainGrid, Mode=OneWay}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<local:DeviceTreeView x:Name="deviceTree" PyngInfo="{Binding
PyngSystemVm.PyngInfo}" Grid.Row="0"/>
</StackPanel>
<-- There is more code here but it is not important for answering this
question -->
</Grid>
I tried binding the height of "SidePanel" to the actual height of "MainGrid" but when I run this code and inspect the elements the Grid resizes with the window but the StackPanel does not. The StackPanel and the Grid even have different heights which doesn't make sense to me as their heights should be bound together.
I have also tried wrapping the entire StackPanel in a border and binding to that but that also did not work.
You don't need to bind the height of the StackPanel, simply setting its VerticalAlignment to Stretch will do it. However... You are still not going to get what I think you want. The StackPanel only stacks its child controls, it does not adjust them (at least not in the "stack" direction). Look into using a different control like Grid or UniformGrid or just expand your existing grid to have rows as well as columns.
So i was wondering if its posible to stretch a expander on a page when having HorizontalAlignment set to left on a Usercontrol/page.
The problem is that we dont want to set a width on the expander because we want it to resize when resizing the application. We also cant set a minwidth on the expander because our application also has a minwidth of 850 and a normal width of 1200 and we want the expander always stretch to the maximum size.
Code sample:
<UserControl x:Class="WpfApp1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignWidth="1100" HorizontalAlignment="Left">
<DockPanel>
<StackPanel>
<Expander Background="LightBlue"/>
</StackPanel>
</DockPanel>
</UserControl>
Our main goal is to create something like the image below where the radio button is always on the right and the expander sizes to it's avaible space.
If you are using DockPanel just use its Dock property for child elements and set LastChildFill="True" (Expander should be the last child element of course).
Something like this:
<DockPanel LastChildFill="True">
<RadioButton DockPanel.Dock="Right" Content="Active"/>
<Expander DockPanel.Dock="Left" Header="title1" Background="LightBlue"/>
</DockPanel>
Can you set the HorizontalAlignment to Stretch where you are using your control?
<Window ...>
<Grid>
<local:Window1 HorizontalAlignment="Stretch"></local:MainWindow>
</Grid>
</Window>
(Where local:Window1 is your user control as defined in the question)
We solved the isue by using a grid with column width set to auto and * in the expander header:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
I have a ListView which is showing both scroll bars. To achieve that, I places my ListView within a Border located in a Grid like below:
<Window ...
MinWidth="600" MinHeight="500" Width="800" Height="500"
Topmost="True"
WindowStartupLocation="CenterScreen"
SizeToContent="Height" WindowStyle="None">
<Window.Resources>
<ResourceDictionary>
...
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" MinHeight="60"/>
<RowDefinition Height="48"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="370"/> <-- THIS IS HARDCODED TO 370 BUT I NEED IT TO BE RESIZABLE
</Grid.RowDefinitions>
<Grid Margin="5,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="346*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding MyName}" Grid.Column="1"
Style="{StaticResource MyNameStyle}" Margin="0,5,0,5" />
</Grid>
<Border BorderBrush="{StaticResource MyBrush}" Grid.Row="1" Grid.Column="0" >
<ListView
x:Name="lstMyListView"
Margin="0,0,0,0"
BorderBrush="Transparent"
ItemsSource="{Binding MyItems}"
SelectedIndex="0"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto">
...
...
</ListView>
...
...
</Border>
...
...
</Grid>
</Grid>
</Window>
This is all in a form that is resizable. Therefore, the ListView should also resize but it should do that only when user resizes the form. The problem with my hard coded value above is obvious, the ListView will not resize but stay at constant height=370.
I know I can set this to 370* but in that case, my List will resize to fit all items. I want to limit this so that resizing only occurs when user resizes the form. So, ListView should show scroll bars if there are more items and as the user resizes form, that scroll bar should go away if form is resized to height that can accommodate all items in ListView.
UPDATE:
Instead of hard coding the height to 370 above, I have tried setting the height to , Auto, and 370. All of these would expand the ListView (and therefore form, too) to accommodate all items in the ListView.
UPDATE 2:
Updated XAML to show whole tree structure.
UPDATE 3:
As per Rachel's suggestion, set hardcoded 370 to "*" in commented line above in XAML and that produces form resized so that the ListView fits all items in it. I added screenshot showing the form as it opens and a screenshot showing how it should look like when it opens. As you can see, it resizes hightwise to accomodate all itesm.
What I need is that form and ListView stay in their set size and resize only if user resizes the form.
If I understand your question correctly, you are saying the form loads as too large of a size because the ListView is growing to it's full height. If that's the case, remove the SizeToContent="Height" from the <Window> tag since it is making the window's initial height be equal to whatever height the content is, which includes the fully sized ListView.
By setting ScrollViewer.VerticalScrollBarVisibility="Visible" & MaxHeight="700"
scroll bar will be visible
MaxHeight to any value
Hi I think i have understand you. So, i am trying:
So, you want to have your ListView at least a height of 370 and then only resizes if the window resizes (increment and decrement of window size).
Setting MinHeight of 2nd RowDefinition could help
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition MinHeight="370"/> <!-- THIS IS HARDCODED....-->
</Grid.RowDefinitions>
.....
</Grid>
Thank you.
I have a WPF UserControl with two Grids above each other. The bottom Grid is in a ScrollViewer. The idea is to have the first Grid be the header of the second Grid. I'm having trouble with the width of the columns however. Both Grids should take up all the space they can (the width of the Window), but the top Grid should of course be a little less wide, because there's a scrollbar on the right of the bottom Grid.
This is the simplified Xaml I've got:
<UserControl>
<DockPanel>
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<ScrollViewer>
<Grid>
<Grid.ColumnDefintions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefintions>
</Grid>
</ScrollViewer>
</DockPanel>
</UserControl>
This renders fine actually, except that the most right column of the top Grid extends over the scrollbar, which I want to avoid.!
Here is an image of the result: Grid column and width of scrollbar. The red indicates where the column/cell is now, but I want it to stop at the blue line. I've tried SharedSizeGroups, but that seems to make my Grids small again (not take up the full space of the window).
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Name="sv">
<Grid MinWidth="{Binding ElementName=sv, Path=ViewportWidth}" MinHeight="{Binding ElementName=sv, Path=ViewportHeight}" />
</ScrollViewer>
The problem is setting up a correct dependency between the ScrollViewer container size and the grid size. Let us consider just the width: the binding above allows the ScrollViewer to expose the horizontal scrollbar only if necessary:
enlarging a single column of the grid (eg. with a splitter) does not provoke the resizing of the other columns (which would happen if you bind Width instead MinWidth).
Using the ViewportWidth instead of ActualWidth takes into account the scrollbar width, if there is one.
Just try
Found the solution here. I gave my top Grid a Width:
Width="{Binding ElementName=BottomGrid, Path=ActualWidth}"
I have a listview with several rows, the problem is that even if the vertical scrollbar is visible, it doesn't work, I explain, it seems that because the grid height is Auto, then there is no maximum height and all the content is displayed, even if part of it is not visible, the only part-solution I've found is to set pixel height to the grid, like 600, and then you can scroll the content of the listview, but obviously this is not a very good solution since I would like the height be defined by it's container, I have tried to bind the height property to ActualHeight of the TabItem, but that doesn't work either, I'm desperate so if anyone knows how to solve this problem I would highly appreciate it, thanks in advance.
Below is basically the code I'm using.
<TabItem Header="Orders">
<Grid Height="Auto">
<ScrollViewer>
<ListView ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.CanContentScroll="True" >
</ListView>
</ScrollViewer>
</Grid>
</TabItem>
I think the problem is your Height="Auto" is growing the Grid to display all the rows.
Set your Grid Row Height and Width to * with means fill container (the tab)
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Listview Grid.Row="0" Grid.Column="0" />
I believe the problem could be you have a scroll viewer surrounding a control (the ListView) that has a built in scroll viewer. Try removing the outer ScrollViewer.
in fact the listview has a built in scroll viewer so I removed it, however the problem persist in the same manner, now I have the following:
<TabItem Header="Orders">
<Grid Height="Auto" Margin="0,0,0,0">
<ListView ItemsSource="{Binding}" HorizontalAlignment="Stretch"
x:Name="listViewOrdenes"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListView>
</Grid>
</TabItem>