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 } } }"

How do i make a clickable listbox?

i have a list of users that are bound to a listbox(image and the name of the user) and i want to render this lisbox clickable so whnever i click on a user's image i will be redirected
to his account.
this is the user control that displays the users:
<UserControl x:Class="Navigateur.Presentation.UserControlWork.ListeEnfControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:conv="clr-namespace:Navigateur.Presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="Auto" Width="Auto"
>
<UserControl.Resources>
<conv:ByteArrayToImageConverter x:Key="bytearraytoImageConverter" />
</UserControl.Resources>
<Grid >
<ListBox x:Name="_imageList" Margin="10,10,10,0" IsSynchronizedWithCurrentItem="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" VerticalAlignment="Top" Height="250" BorderThickness="0" MouseLeftButtonDown="Click_Kid" >
<ListBox.ItemTemplate>
<DataTemplate DataType="Enfant">
<Border CornerRadius="30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.Row="0" x:Name="image" Source="{Binding avatar}" Width="50" Height="80"/>
<TextBlock Grid.Row="1" x:Name="nom" Text="{Binding prenom}" VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>

Use Button in place of Image and override template of Button to give it an Image look, so that you can have clickable image.
<Button Grid.Row="0" Width="50" Height="80">
<Button.Template>
<ControlTemplate>
<Image x:Name="image" Source="{Binding avatar}"/>
</ControlTemplate>
</Button.Template>
</Button>
If you are using MVVM, you can bind Command with button OR if want to do in code behind you can hook Click event of button to determine which image is clicked on.

Customized TabItem in ResourceDictionary

I have created a TabItem in a ResourceDictionary and use it in my UserControl but the defined content won't show up, why and how to fix this?
The ResourceDic:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<ControlTemplate x:Key="T1" TargetType="sdk:TabItem">
<sdk:TabItem>
<sdk:TabItem.Header>
<StackPanel Orientation="Horizontal">
<sdk:Label Content="{TemplateBinding Header}"/>
<Button Content="X" Margin="15,0,0,0"/>
</StackPanel>
</sdk:TabItem.Header>
<toolkit:DockPanel MinWidth="600">
<Grid toolkit:DockPanel.Dock="Left">
<sdk:Label Grid.Row="2" Grid.Column="0" Content="Pic:"/>
...
</Grid>
</toolkit:DockPanel>
</sdk:TabItem>
</ControlTemplate>
</ResourceDictionary>
The UserControl:
<UserControl x:Class="PortView" ....>
<UserControl.Resources>
<ResourceDictionary Source="PortfolioTemplateDictionary.xaml" />
</UserControl.Resources>
<Grid>
<sdk:TabItem Template="{StaticResource T1}" Header="Page 2"/>
</Grid
...
</UserControl>

I have now used the approach explained in this article: TabItem in a separate XAML
<UserControl x:Class="WpfApplication19.Tab1Data"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid>
<TextBlock Text="Tab Data" />
</Grid>
</UserControl>
<TabControl>
<TabItem Header="Tab 1">
<tabData:Tab1Data />
</TabItem>
</TabControl>

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);