Develop Reference

How do I get the tabcontrol effect with buttons and a frame

So I'm trying to get the same effect as a tab control where the button kinda merges into the frame seamlessly.
If we look at this one, we can see that there is nothing cutting off the "Red" button from the frame. It kinda just goes into the frame
To be more explicit, this is what I'm focusing on
And I wanted to accomplish the same effect with buttons and a frame but I'm not sure how to do it.
What's the proper way of accomplishing the same effect? Is there a style I should inherit from?
This is what I have
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Button Height="50"/>
<Button Height="50"/>
<Button Height="50"/>
<Button Height="50"/>
</StackPanel>
<StackPanel Grid.Column="1">
<Frame/>
</StackPanel>
</Grid>

Sample for your screenshot
<Window x:Class="TabControl.MainWindow"
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:TabControl"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<DockPanel>
<TabControl TabStripPlacement="Left">
<TabItem Header="Header 1">
<Label Content="Text write here..." />
</TabItem>
<TabItem Header="Header 2" />
<TabItem Header="Header 3" />
<TabItem Header="Header 4" />
</TabControl>
</DockPanel>
</Grid>
</Window>

Fix listview's height to empty space

I'm new with WPF and want to set the listview's height to the bottom of my frame. The listview's width ist already set with a fix value. The following code represents my DockPanel:
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
The first screenshot will show the current szenario:
http://i.imgur.com/XMbMh4t.png
and the heigth shell strech to the height as it is shown in the next picture:
http://i.imgur.com/Tf7O4pK.png
Thanks a lot!
Best regards

Instead of this:
<Window>
<DockPanel>
<Menu DockPanel.Dock="Top">
</Menu>
<DatePicker DockPanel.Dock="Top" />
<TabControl>
<TabItem>
<StackPanel>
</StackPanel>
</TabItem>
<TabItem>
<StackPanel>
<Grid>
</Grid>
<DockPanel>
<TextBox DockPanel.Dock="Top" />
<ListView>
</ListView>
</DockPanel>
</StackPanel>
</TabItem>
<TabItem>
</TabItem>
</TabControl>
</DockPanel>
</Window>
Try this:
<Window>
<DockPanel>
<Menu DockPanel.Dock="Top">
</Menu>
<DatePicker DockPanel.Dock="Top" />
<TabControl>
<TabItem>
<StackPanel>
</StackPanel>
</TabItem>
<TabItem>
<DockPanel> <!-- instead of StackPanel -->
<Grid DockPanel.Dock="Top">
</Grid>
<!-- can now get rid of this <DockPanel> -->
<TextBox DockPanel.Dock="Top" />
<ListView>
</ListView>
</DockPanel>
</TabItem>
<TabItem>
</TabItem>
</TabControl>
</DockPanel>
</Window>

You need to use VerticalAlignment="Stretch" on the ListView element. The same is true for HorizontalAlignment if you need to do the same horizontally.
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" VerticalAlignment="Stretch" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
See http://msdn.microsoft.com/en-us/library/ms751709(v=vs.110).aspx for more information.
I have tested your code using VerticalAlignment="Stretch", and I am getting your desired result:
<Window x:Class="WpfApplication1.MainWindow"
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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" VerticalAlignment="Stretch" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
</Grid>
</Window>
If you cannot get the VerticalAlignment to work properly, we can bind the ActualHeight of an element to its ancestor element. So, add this to your ListView:
Height="{ Binding Path=ActualHeight, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={ x:Type Window } } }"

Style importet XAML components

I've got a XAML file with defined resource for a stackpanel. What I would like to do is to style the TextBox in <ResourceProfileViews:DescriptionView/> without affecting other TextBloxes in this view.
My "main" view.
<UserControl x:Class="Comsol.STEA.ProjectViewModule.View.ResourceProfileView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Resources="clr-namespace:Comsol.STEA.Core.Resources;assembly=Core"
xmlns:Converters1="clr-namespace:Comsol.STEA.Core.Utilities.Converters;assembly=Core"
xmlns:Commands="clr-namespace:Comsol.STEA.ProjectViewModule.Commands"
xmlns:ResourceProfileViews="clr-namespace:Comsol.STEA.ProjectViewModule.View.ResourceProfileViews"
xmlns:Behaviors="clr-namespace:WpfLib.Behaviors;assembly=WpfLib"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Resources/Resources.xaml" />
</ResourceDictionary.MergedDictionaries>
<Converters1:BoolToCollapsedVisibilityConverter x:Key="btcvc"/>
</ResourceDictionary>
</UserControl.Resources>
<StackPanel Background="{DynamicResource SteaBackgroundBrush}"
FocusManager.FocusedElement="{Binding ElementName=NameBox}">
<StackPanel.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Width" Value="360"/>
<Setter Property="MinLines" Value="3"/>
</Style>
</StackPanel.Resources>
<GroupBox Header="{x:Static Resources:Strings.ProfileSettings}">
<StackPanel>
<AdornerDecorator Visibility="{Binding Path=AnyAvailableCategories, Converter={StaticResource btcvc}}">
<StackPanel>
<ResourceProfileViews:DescriptionView/>
</StackPanel>
</AdornerDecorator>
</StackPanel>
</GroupBox>
</StackPanel>
</UserControl>
The DescriptionView
<StackPanel Orientation="Horizontal">
<Label Content="{x:Static Resources:Strings.Description}"/>
<TextBox Text="{Binding Path=Description, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"/>
</StackPanel>

c# tabcontrol and grid problem

Hi i have a xaml code like this
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="test.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Button Content="Create a tab" HorizontalAlignment="Left" Margin="49,26,0,0" VerticalAlignment="Top" Width="75"/>
<TabControl Margin="0,63,0,0">
</TabControl>
</Grid>
</Window>
in TabControl no tabItem there.
please helpe me, how to program with c# :
if i click the button, it will add a tab item with grid and a textblock in that. the result i wish like this :
<Grid x:Name="LayoutRoot">
<Button Content="Create a tab" HorizontalAlignment="Left" Margin="49,26,0,0" VerticalAlignment="Top" Width="75"/>
<TabControl Margin="0,63,0,0">
<TabItem Header="tab1">
<Grid>
<TextBlock Text="hi there" />
</Grid>
</TabItem>
</TabControl>
</Grid>
and if i click more that button, will continue add tab like that.
please help me (worship)

Given that this is your xaml:
<Grid x:Name="LayoutRoot">
<Button Content="Create a tab" HorizontalAlignment="Left" Margin="49,26,0,0" VerticalAlignment="Top" Width="75"/>
<TabControl Margin="0,63,0,0" x:Name="MyTabControl">
<TabItem Header="tab1">
<Grid>
<TextBlock Text="hi there" />
</Grid>
</TabItem>
</TabControl>
</Grid>
you can add tabitem in codebehind like so:
TextBlock t = new TextBlock { Text= "hi" };
Grid g = new Grid;
g.Children.Add(t);
TabItem t = new TabItem();
t.Content = g;
MyTabControl.Children.Add(t);

Text orientation

I know you can do this to get vertical text in a tab header:
<Window x:Class="Abodemploy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl Margin="0" Name="tabControl1" FlowDirection="LeftToRight" TabStripPlacement="Left">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock>Homes</TextBlock>
</StackPanel>
</TabItem.Header>
<TabItem.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90" />
</TransformGroup>
</TabItem.LayoutTransform>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
However the text letters are sideways. What I'd like (if possible) is for the letter orientation to be correct (ie upwards), but the text flow downwards, is this possible, or am I just dreaming the impossible dream?
Thanks Psy

I think the following post answers your question:
vertical-text-in-wpf-textblock
and I was able to get the desired result as follows:
XAML
<Window x:Class="Test.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl Margin="0" Name="tabControl1" FlowDirection="LeftToRight" TabStripPlacement="Left">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock >
<ItemsControl x:Name="ic"></ItemsControl>
</TextBlock>
</StackPanel>
</TabItem.Header>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
And then set the ItemsSource of the ItemsControl to the string you want in the code behind.

Do you ask for this?
<TabItem.Header>
<StackPanel>
<TextBlock>H</TextBlock>
<TextBlock>o</TextBlock>
<TextBlock>m</TextBlock>
<TextBlock>e</TextBlock>
<TextBlock>s</TextBlock>
</StackPanel>
</TabItem.Header>