How to Add TabItem with Header and Content using WPF and MVVM - c#

All, I have the following XAML in my main window
<TabControl ItemsSource="{Binding Path=Workspaces}"
Grid.Column="1"
Grid.ColumnSpan="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
TabStripPlacement="Top">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Path=DisplayName}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
this is adding a TabItem with the desired content. But the content is not filling the TabItem/TabPage. Can someone tell me why?
Thanks for your time.

Converting my comments into an answer:
use Snoop to inspect the Visual Tree at runtime. That should give you a hint about what's going on.
Inspect the View and check what the Alignment properties are for each element inside the Content part of the TabControl. Also check to see if there's some fixed Width or Height on any element, which would prevent it from stretching

Related

Style on ListView Contents is getting applied to the ListView itself

I've encountered a strange behaviour in WPF/XAML. My intent is to create something like this, using Borders, a ListView, and a style for the Borders:
This is what I think the code should be:
<ListView HorizontalAlignment="Right" Margin="20">
<ListView.Resources>
<Style TargetType="Border">
<Setter Property="Height" Value="20"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Background" Value="Blue"/>
</Style>
</ListView.Resources>
<Border/>
<Border/>
</ListView>
But that code actually produces this:
This lead me to play around a bit and I found something really strange. The Width and Height values in the Style for the Borders are getting applied to the ListView itself!
For example, this code:
<ListView HorizontalAlignment="Right" Margin="20">
<ListView.Resources>
<Style TargetType="Border">
<Setter Property="Height" Value="100"/>//this should do nothing because the borders set their own height
<Setter Property="Background" Value="Blue"/>
</Style>
</ListView.Resources>
<Border Height="20" Width="150"/>
<Border Height="20" Width="150"/>
</ListView>
Produces this:
(The height of the ListView is 100 pixels)
When I change the value of Height in the value of the Style, my expectation is that it applies to the Borders, who then ignore it because they set their own heights. In other words it should have no effect. But When I change Height, the height of the ListView changes.
To make things weirder, the Background value is properly being applied to the Borders. Do I have a misunderstanding about how this code should work? Have I found a bug? What is the right way to do what I am trying to do?
I am using Visual Studio 2022, .NET 6, C# 10.
I figured it out. ListView uses a Border internally for its background. The Style is getting applied to this Border, as well as the Borders that are items in the ListView.
The solution is to use a type other than Border, or to make a user control that wraps Border. Grid works just fine:
<ListView HorizontalAlignment="Right" Margin="20">
<ListView.Resources>
<Style TargetType="Grid">
<Setter Property="Height" Value="20"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Background" Value="Blue"/>
</Style>
</ListView.Resources>
<Grid/>
<Grid/>
</ListView>
Produces this:

How do I remove the borders separating the headers in a Listview in XAML (WPF)?

I am making a ListView which loads users in from an Active Directory. To accomplish the brand/styling of the company I am developing the application for I would like to tweak some of the styling of the ListView element.
I have made it so the border of the headers in the Listview are transparent. In the editor in Visual Studio it looks how I want it to be, but when I look at the headers in the ListView in runtime I still get to see borders separating the headers (See image below).
https://i.gyazo.com/99dc8d60d6c5b2e1761456df685d850f.png
I have already tried Googling and I even went to the second page of the Google search result. Can you imagine?
Down here is the style I have used for the headers in my XAML file
<Style x:Key="ListViewHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="BorderBrush" Value="Transparent"></Setter>
<Setter Property="IsHitTestVisible" Value="False"></Setter>
</Style>
What I want is to remove those borders separating the headers in my ListView element.
You can override the template of the GridViewColumnHeader
<Window.Resources>
<Style x:Key="GridHeader" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<TextBlock Text="{TemplateBinding Content}" Padding="5"
Width="{TemplateBinding Width}" TextAlignment="Right" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ListView>
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource GridHeader}">
</ListView.View>
</ListView>
Solution taken form here: Remove Separators in ListView Columns - WPF

C# WPF Style TreeViewItem

I made a custom resource dictionary style for a TreeViewItem, but I am having difficulties with it.
<Style x:Key="StageTreeViewItem" TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="Foreground" Value="Gold"/>
<Setter Property="FontFamily" Value="ArialN"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<Grid>
<Image Name="PrimaryButtonImage" Source="pack://application:,,,/Images/TreeViewItem/TreeViewItem_Normal.png"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The content/header of the TreeViewItem does not exist. I put "Stage One" as Header of the TreeViewItem, but it doesn't show up. Also, if I add multiple tree view items on another, it does not expand at all.
Another thing:
How can I remove the highlights when I select the tree view item? I want it to be transparent even when I hover over it and even when I click it. I don't want anything to happen, but I just don't know how, I tried everything.
Your provided code is not making it clear how you're setting header of TreeViewItem.
For other part of the question, you can use Triggers for events happening in WPF forms. Also have a look at this link, as you'll have to define a template for changing background color on mouse hover.
IsMouseOver Trigger not working in WPF

How to have multiple window resource styles for same element type in WPF

I have an element in my window, as below:
<Grid>
<DockPanel LastChildFill="True">
<Label Name="StatisticsLabel" DockPanel.Dock="Bottom"></Label>
<RichTextBox Style="{StaticResource FocusMode}" Name="RichTextBox1" />
</DockPanel>
</Grid>
I would like to swith between two styles at runtime depending of the state I need the control to be in.
I had assumed I could use the following code:
<Window.Resources>
<Style x:Name="FocusMode" TargetType="RichTextBox">
<Setter Property="VerticalScrollBarVisibility" Value="Disabled"></Setter>
</Style>
<Style x:Name="NormalMode" TargetType="RichTextBox">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"></Setter>
</Style>
</Window.Resources>
Of course this isn't working.
Why does WPF not support multiple styles per element? Seems like a pretty basic requirement?
Otherwise, how do I achieve this?
Sorry figured it out, instead of x:Name use x:Key as below:
<Window.Resources>
<Style x:Key="FocusMode" TargetType="RichTextBox">
<Setter Property="VerticalScrollBarVisibility" Value="Disabled"></Setter>
</Style>
<Style x:Key="NormalMode" TargetType="RichTextBox">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"></Setter>
</Style>
I'd have a look at style triggers. You can probably get a good start on the subject from this post: How to make Style.Triggers trigger a different named style to be applied

Binding Errors in DataTemplated ListBoxItems

Currently i have a user control which contains a listbox of other visual element user controls; which (for this special case) have been data templated.
<Grid>
<ListBox ItemSource="{Binding Path=UserControlCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding}"/>
<Button/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
The issue is that i have This Issue. And because of the data template, i can't seem to find a way to correct the styling issue.
Any help would be greatly appreciated.
I found by overriding the ListBoxItem's horizontalcontentalignment and verticalcontentalignment i was able to correct the issue.
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
I also found changing to a listview helpful but did have issues of its own.

Categories

Resources