expander overflows - c#

c# vs2010
hi all:
how can I bring to focus on a window all controls hidden on expander.
expander is collapsed at the bottom of the window,
when i click on it to expand it (i have to scroll down,'cause controls are not showing on the window), I would like to bring into focus the first control and be able to see the last control on the window without manually scrolling.
any ideas how to accomplish this task on Xaml or code behind.
thanks

<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ScrollViewer>
<!-- lol stuff here -->
</ScrollViewer>
<Expander Grid.Row="1">
<TextBlock>Wow! You don't have to scroll to see me!</TextBlock>
</Expander>
</Grid>
</Window>

Related

WPF Stackpanel height not resizing when removing a usercontrol

I have a stackpanel in a grid row with the row height set to auto.
I add user controls at runtime and the height resizes fine, when removing the user controls the height does not reduce though. I have tried to clear the stackpanel children, remove them one by one and also implemented IDisposable in each user control but when the child count shows zero the height has not reduced.
Sample XAML below, any help would be welcomed please?
<Grid x:Name="TestGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Test Header" Style="{StaticResource SubHeaderTextBlock}" />
</StackPanel>
<StackPanel x:Name="ChildItems" Grid.Row="1" />
</Grid>
Replace the StackPanel with a Grid. Grids stretch and retract better than StackPanels.
Instated of removing put Visibility to Collapsed

ListView Inside a Grid inside a ScrollViewer

I have a ListView inside a Grid which in turn is inside an "overall ScrollViewer".
Users should be able to scroll across the entire page horizontally and then scroll vertically down several child list like elements. While I am able to scroll horizontally, placing the outer ScrollViewer around the page content breaks my ListViews
Here is a cut down version of my XAML setup:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Uid="Title" Text="Title"/>
<ScrollViewer Grid.Row="1" ZoomMode="Disabled"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
HorizontalScrollMode="Enabled">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="380" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--My List-->
<ListView x:Name="MyList" Grid.Column="0" />
<Grid x:Name="AppointmentDetailView" Grid.Column="1">
<!--Some other stuff-->
</Grid>
</Grid>
</ScrollViewer>
</Grid>
If I set a fixed height on any parent of the ListView or the ListView itself the scrolling works as expected but fixing the height is undesirable for screens of varying sizes. I tried binding to the ActualHeight of the ListViews parents but no luck.
It seems like the ScrollViewers children are not constrained to the height available even when the ScrollViewer.VerticalScrollMode is disabled. Seems rather odd to me, I would have expected the ScrollViewer's layout logic to be similar to Grid in the direction it has been disabled.
Any help with this is appreciated, Thank you!
I found a workaround that involves wrapping my ScrollViewer in a Grid and binding to the outer Grids ActualHeightProperty on the child element of the ScrollViewer. its a bit of a hack but does what I need it to and goes something like this
<Grid x:Name="ScrollViewerContainer" ...>
<ScrollViewer VerticalScrollMode="Disabled" ...>
<!--Page Content-->
<Grid Height="{Binding ActualHeight, ElementName=ScrollViewerContainer}" ...>
....
Personally I feel like the ScrollViewer should not allow its children to determine its Width/Height when the scroll mode is disabled in a particular direction as it breaks nested ScrollViewer's. It should revert back to the available space. But hey, I'm not Microsoft..

ScrollBar is not showing in WPF ListView which is inside nested User and Content Controls

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.

How to activate a ScrollBar?

I'm starting to learn how to program and I have a problem.
I am making an application in C # WPF.
I want to put a scrollbar on a grid and not activate it.
I searched and tried several things I found, but I have not gotten it right.
As the window is larger than the monitor, what I want is to put a scrollbar to access the bottom of the window.
The last thing I tried is this.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="921*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ScrollBar Height="921" HorizontalAlignment="Left" Margin="761,0,0,0" Name="scrollBar1"
VerticalAlignment="Top" Width="12" Maximum="960" Minimum="1" SmallChange="1" />
</Grid>
With this comes the scrollbar, but the window does not move.
Thanks in advance and forgive for writing. I made it with google translator.
The content that you wish to scroll should be a child of a ScrollViewer.
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="921*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
For the purposes of layout, The child is assumed to have infinite avaliable width and height. This means that the child of a scrollviewer will never behave as it would with restricted space (unless you set maxwidth / maxheight).

WPF Designer - Selecting element inside element

I am new to WPF so I would accept every piece of advice. My problem:
I use the Designer to put different components of the UI the way I like. And it's great. The problem came with this type of XAML structure:
<Window>
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
/* Couple of buttons */
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="223*"/>
<RowDefinition Height="99*"/>
</Grid.RowDefinitions>
<TabControl Margin="85,0,0,0" Padding="0,-5,0,0" Grid.RowSpan="2">
<TabItem Visibility="Collapsed">
<Grid>
/* textboxes and labels */
</Grid>
</TabItem>
<TabItem Visibility="Collapsed">
<Grid>
<Border Visibility="Hidden" Margin="136,66,76,66" Panel.ZIndex="10" BorderThickness="1" Width="320" Height="180">
<Grid Background="White">
<Grid.Effect>
<DropShadowEffect BlurRadius="10" RenderingBias="Quality" Direction="270" ShadowDepth="3" Opacity="0.1"/>
</Grid.Effect>
/* labels, textboxes and buttons */
</Grid>
</Border>
<TabControl Margin="0,0,0,38">
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
/* other elements */
</Grid>
</TabItem>
<TabItem>
<Grid>
<Grid>
/* checkboxes */
</Grid>
<Grid>
/* checkboxes */
</Grid>
/* labels */
</Grid>
</TabItem>
<TabItem>
<Grid>
</Grid>
</TabItem>
</TabControl>
/* buttons and labels */
</Grid>
</TabItem>
</TabControl>
</Grid>
</Grid>
Usually when I want to move something on the scene I just select it and drag / change it since it's a lot easier than just writing it in XAML. However, using the code above, if I want to select something from the inner TabControl I just can't. It automatically selects the one above which makes it a bit harder to manage the UI. My guess it's something to do with the Z-Index but I'm not really sure. I know it is probably a noobish question but it makes me struggle so I will be very thankful if someone explains this to me!
Thanks!
Well my guess is you have grids layered on top of each other that are capturing the clicks and preventing the selection of the elements below (z-order like you mention).
A few things to note
This isn't really specific to the designer, if you have Hit Testable elements layered on top of each, even if they look transparent, they will still capture the click and "steal" focus. You can do various things to prevent this, one option might be setting IsHitTestVisible=false on elements that you want clicks to "pass through" to elements below it. Another option is to set the Background of an element to {x:Null}, instead of the default (which is Transparent).
You can use the Document Outline panel probably on the left hand side of your VS window (or View | Other Windows | Document Outline) to navigate the Visual Tree...visually. This would allow you to "select" an item even it is underneath other items. However, even once it is selected in the document outline it won't be floated to the top of the design surface, so you won't be able to drag it around to position it, but you will be able to grab re-size handles and access the properties window for the selected element.
Ultimately you have to "hide" the element that is on top of it to get the drag positioning you want.
I had the same issue - I was busy laying out my app in the WPF designer, and things that I could move around before were unselectable and undraggable, with the TabControl always stealing focus.
The issue seems to be with the TabItem being Collapsed. I found it impossible to select anything inside a TabItem that had Visibility="Collapsed".
If you need to move things around try changing the visibility to Visible temporarily - I was able to move things around in the designer and then later set the visibility back again.
I haven't tested this particularly thoroughly and it's a bit of a kludge, but it worked well enough for me to do the layout.

Categories

Resources