C# WPF - Scrollbar in dynamic TabControl - c#

I'm trying to add a Scrollbar for each TabItem so when there is too much content i can scroll down. I've tried to set it to visible but it doesn't work.
The TabItems will be added dynamically over the code with Header and Content.
Any ideas to add a Scrollbar horizontally and vertically over code or XAML?
<TabControl x:Name="SemesterTabs" Margin="20,61,20,55" Width="584" HorizontalAlignment="Left">
<TabControl.ContentTemplate>
<DataTemplate>
<StackPanel>
<!-- Tabs mit Datagridview binden und nur ein Eintrag in den Tabs auswaehlbar machen -->
<DataGrid IsReadOnly="True" SelectionMode="Single" FontStyle="Normal" ItemsSource="{Binding DefaultView}" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionChanged="DataGrid_SelectionChanged">
<!-- Um Faecher mit Rechtsclick einfuegen, bearbeiten und loeschen zu koennen -->
<DataGrid.ContextMenu>
<ContextMenu>
<MenuItem Header="Hinzufügen" Click="addNewRow_Click"/>
<MenuItem Header="Bearbeiten" Click="editRowEntry_Click"/>
<MenuItem Header="Löschen" Click="deleteRowEntry_Click"/>
</ContextMenu>
</DataGrid.ContextMenu>
</DataGrid>
</StackPanel>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>

The StackPanel is the problem, you have to remove it.
To understand why, it helps to think of panels and container controls as containers that have an external size, i.e. the size they take up in their container, and an internal size, i.e. the space they provide for their children.
For example, in a Grid, the external size and the internal size are the same. But in a ScrollViewer, the internal size may be infinite, while its external size is not.
The same is true for a StackPanel, say with a vertical orientation. The internal width of such a panel is the same as its external width, but its internal height is infinite.
Now, when you place a ScrollViewer in such a panel, it may present a horizontal scrollbar, as needed to provide space for its content, but it will never present a vertical scrollbar. It doesn't need to, as its external height can grow to infinite, and because of that, so can its internal height without having to use a scrollbar.

The Problem was the Stackpanel. Somehow it was blocking the Scrollviewer in my TabItems.

Related

Listview overlay and highlighting listview items

I have a ListView wrapped in Grid on top of which I have a panel overlay( How to make overlay control above all other controls?). I would like to highlight a listview item that is under even when the cursor is not directly over it.
I would like to have a highlight like this when the cursor is over the red rectangle.
<Grid Name="grid">
<ListView Name="timeSpansListBox" SelectionMode="Extended" HorizontalAlignment="Left" Width="{Binding ElementName=timePanel, Path=ActualWidth}">
...
</ListView>
<!-- our overlay -->
<MyPanel Name="timePanel" Panel.ZIndex="999">
... items (rectangles you can see on the image)
</MyPanel>
</Grid>
How could I do this?
Similar issue: How to get control with lower zindex when mouse clicked in wpf?
I could set IsHitTestVisible to false but I need panel items to remain clickable so it's not an option.
If only there is some way to set IsMouseOver programmatically...
Set the vertical and horizontal alignment to stretch for the overlay panel
<MyPanel Name="timePanel" Panel.ZIndex="999"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
... items (rectangles you can see on the image)
</MyPanel>

Limiting the width of the TextBlock in a WPF ListView

I have a ListView and in it's ItemTemplate there's a TextBlock (inside a Grid) which often has long lines of text. The problem is if the text is too long it increases the width of the ListViewItem rather than wrapping the text. How can I limit the width of the TextBlock so that it will not exceed the width of the ListView?
I don't want to hardocde the width to a constant value.
I tried setting the ScrollViewer.HorizontalScrollBarVisibility property to Disabled and setting TextWrapping="Wrap" on the TextBlock, but that didn't do the trick.
When I debug the application the Live Property Explorer shows that even though the ScrollViewer.HorizontalScrollBarVisibility is disabled it's still horizontally scrollable (the IScrollProvider.HorizontallyScrollable property is true).
Any idea how I can limit the textblock size properly?
Played with it a little and this gave me the expected result:
<ListView x:Name="listView"
HorizontalAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=.}" TextWrapping="Wrap"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Hope it works for you too!.
If you don't want to hard code the MaxWidth for the text block, just give a relative width to it based on the ListView width.

WrapPanel behavior within ListBox: vertical to fill available space and then wrap horizontally

I have a listbox within a custom scrollviewer that provides some unique visual styles. The Listbox ItemsPanel is a WrapPanel, and all of the listbox items are 100x100. The Listbox height is static and will not be changed. The desired layout is this: fill available space vertically before wrapping like so:
I've played with both Orientation variables of the WrapPanel, and have not been able to achieve the desired layout. I suspect this has something to do with the fact that I'm wrapping the Listbox in a custom ScrollViewer control and the listbox can't calculate available space properly. Since the height is static, I feel like i should be able to make this work (it only scroll horizontally, and the outer custom scrollviewer should be doing the scrolling). Here is the current setup slimmed down:
<controls:CustomScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden">
<controls:CustomScrollViewer.Template> .... </controls:CustomScrollViewer.Template>
<ListBox Height="...">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate> .... </DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}"> .... </Style>
</ListBox.Resources>
</ListBox>
</controls:CustomScrollViewer>
Instead of wrapping the Listbox in a scrollviewer, is there a way to get the ListBox to use the custom scrollviewer internally? Or how can I achieve the desired layout?
By hard-coding the Height of the WrapPanel, with the Orientation set to Vertical, I was able to achieve the desired layout.
I would still be curious to a solution that uses the custom scrollviewer to replace the scrollviewer that would be internally in the listbox.

C# XAML ScrollViewer to work without MaxHeight

I have a grid that further down have a StackPanel. I have defined the row's height for the last to be "*", and in this very last row, is where the StackPanel and all the control would inhabit.
So I have the bellow code in XAML for my StackPanel
<StackPanel Grid.Row="1" MaxHeight="333">
<StackPanel MaxHeight="333">
<ScrollViewer MaxHeight="333">
<TextBlock x:Name="lblRouteDetail" FontSize="35" TextWrapping="Wrap"/>
</ScrollViewer>
</StackPanel>
</StackPanel>
Well, it worked, only that I have to constraint that the MaxHeight is 333, without that, it won't work; the ScrollViewer won't work, the content in the TextBlock wouldn't be scrollable.
Could you state where is my problem, and how to fix this things up?
A StackPanel, unless set to a specific height (or width if its orientation is set to Horizontal), does not constrain the height of its children, but is sized according to them. If you want to scroll your controls, you could either keep the MaxHeight property or use a different panel for holding them, such as a Grid or a DockPanel.

Design with multiple Expanders

I need a little help in creating the design I want.
My ViewModel has three collections which are bound to three ItemsControls using Caliburn.Micro. Each collection contains between 10 and 31 items.
I want to put each ItemControl into an Expander. So far, so simple:
<StackPanel>
<Expander IsExpanded="True" Header="Day recordings">
<ItemsControl Name="DayRecordings" />
</Expander>
<Expander IsExpanded="False" Header="Month recordings">
<ItemsControl Name="MonthRecordings" />
</Expander>
<Expander IsExpanded="False" Header="Digit recordings">
<ItemsControl Name="DigitRecordings" />
</Expander>
</StackPanel>
The problem now is that they expand beyond the bounds of the StackPanel they are contained in.
I would like the Expanders to behave like this:
If only one Expander is expanded, it should use the complete space of the StackPanel minus the space needed for the other, not-expanded Expanders. Inside the expanded Expander a vertical ScrollBar should be shown.
If N Expanders are expanded, each should take 1/Nth of the total space of the StackPanel minus the space needed for the other, not-expanded Expanders. In each of the expanded Expanders a vertical ScrollBar should be shown.
If one of the expanded Expanders needs less space than the assigned 1/Nth, it should only use the needed space and the excess space should be evenly distributed to the other expanded Expanders. This behavior is nice-to-have but not essential
Unfortunately, I don't have more than the simple XAML from above, because I don't even have an idea on how to tackle this...
Use a ScrollViewer, put a Grid in it, set row heights to auto.
Put a converter on MaxHeight if you want some fancy layout.
Use the accordion control from the toolkit to get the required behavior.

Categories

Resources