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>

Create a usercontrol with a ScrollView

I have a WPF project.
In this project I have a UserControl with a StackPanel containing various elements. It's within a cell in a Grid. When i resize the Windwo and the Cell becomes to small to fit the Stackpanel I want the scrollview to take over.
I tried putting TheUserControl in a but that only seems to work with Set size. I need it to adjust to the dynamic cell size. All "Solutions" I found online have been unnecessary difficult workarounds for such a simple and commen problem. So I'm pretty sure that there is an easy way to achive this behaviour.
Pseudo-Code
The UserControl:
<UserControl x:class=x.TheUserControl>
<StackPanel>
<Label Content="Label 01 />
<Label Content="Label 02 />
<Label Content="Label 03 />
.
.
.
<Label Content="Label n />
</StackPanel>
</UserControl>
The Window:
<Window x:Class="x.MainWindow>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Header" />
<ScrollView Grid.Row="1">
<x:TheUserControl />
</ScrollView>
</Window>
I'm pretty sure ScrollView works just fine when i put a StackPAnel directly into the ScrollView, so why is it so complicated with a UserControl inbetween?
I'm properly unaware of some obvious behavior in ScrollView and I would be really glad if someone could show me a better approach or explain why it beahaves this way.

Please try to use the ScrollViewer inside of your usercontrol and use HorizontalScrollBarVisibility & VerticalScrollBarVisibility:
userControl:
<UserControl x:Class="WpfApp1.TheUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/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"
xmlns:local="clr-namespace:WpfApp1"
>
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical" Background="LightGray">
<Label Content="Label 01" />
<Label Content="Label 02" />
<Label Content="Label 03" />
<Label Content="Label n" />
</StackPanel>
</ScrollViewer>
</Grid>
</UserControl>
MainWindow:
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" >
<Grid Background="Aqua">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Header" Grid.Row="0" />
<local:TheUserControl Grid.Row="1" />
</Grid>
</Window>
Result, if you resize the window:

Blend Sample Data not shown

I'm following tutorial and noticed that Sample Data doesn't work in VS 2015 Blend as in 2013 Blend. In tutorial and probably all guides by Microsoft all they say is to drag-n-drop sample data collection on ListBox and data magically is there rendered, however for me that doesn't work, nothing changes visually. In properties there is ItemSource changed to sample data one, but that's pretty much it.
Here's my sample data
And here's current result of it
Full XAML of page
<Page
x:Class="TutorialApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TutorialApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource CarData}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" >
<TextBlock Text="Car Voter" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="OverView" Style="{StaticResource SubheaderTextBlockStyle}" />
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1">
<ListBox ItemsSource="{Binding Collection}" SelectedIndex="-1" Background="#00FFFFFB" DataContext="{StaticResource CarData}"/>
</Grid>
</Grid>

Placing controls under User Control

I'm new to WPF, and I am creating a user control as follows:
<UserControl x:Class="WpfApplication3.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/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"
x:Name="MyUserControl2"
d:DesignHeight="300" d:DesignWidth="300" Background="Coral">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="a" Grid.Row="0"/>
<Button Content="b" Grid.Row="1"/>
<Button Content="c" Grid.Row="2"/>
<ContentPresenter Grid.Row="3"/>
</Grid>
This produces the following layout, when the orange area is the content preseter:
In the main window that uses the user control, I want to inject controls into the content preseter
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication3"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:MyUserControl>
<local:MyUserControl.Content>
<Button Content="d"/>
</local:MyUserControl.Content>
</local:MyUserControl>
</Grid>
I would expect the get the following layout:
but instead the entire user control gets overlapped by button d.
How do I manage to do so?

Try placing button itself in Main Window -
<Grid>
<local:MyUserControl/>
<Button Content="d"/>
</Grid>
OR
<Grid>
<Grid.Resources>
<DataTemplate x:Key="MyContent">
<Button Content="d"/>
</DataTemplate>
</Grid.Resources>
<local:MyUserControl/>
</Grid>
and in your User Control -
<ContentPresenter Grid.Row="3" ContentTemplate="{DynamicResource MyContent}"/>

I'm pretty sure that that won't work. When you set the content of MyControl to the button you're saying that the whole content of the user control should be the Button. I think you need to have a property on your user control then bind the contentpresenter to that.
So Something like MyUserControl.SubContent {get; set;} then you can bind the ContentPresenter to that.

silverlight 4 error in .xaml

Hi I have the following code:
<navigation:Page
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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
xmlns:ds="clr-namespace:EnlacePaginaAlumno.Web.Services"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="EnlacePaginaAlumno.Views.Page1"
mc:Ignorable="d"
d:DesignWidth="640" d:DesignHeight="480"
Title="Page1 Page">
<Grid x:Name="LayoutRoot">
<riaControls:DomainDataSource
x:Name="MyData"
LoadSize="20"
QueryName="GetAlumnos"
AutoLoad="True">
<riaControls:DomainDataSource.DomainContext>
<ds:ServiciosAlumnos></ds:ServiciosAlumnos>
</riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>
<Grid.RowDefinitions>
<RowDefinition Height="0.225*"/>
<RowDefinition Height="0.775*"/>
</Grid.RowDefinitions>
<ScrollViewer Margin="8,44,8,42" Grid.Row="1">
<StackPanel Height="230" Width="604">
<sdk:DataGrid x:Name="alumnosGrid" Height="100"/>
</StackPanel>
</ScrollViewer>
<TextBlock Margin="70,32,224,28" TextWrapping="Wrap" Text="Listado de alumnos"/>
</Grid>
but I get the following error:
"Error 1 Property elements cannot be in the middle of an element's content. They must be before or after the content. "
I am newbie and can not find the error!!
Using Silverlight 4, visual estudio 2010, C#

Fixed
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="EnlacePaginaAlumno.Views.Page1"
mc:Ignorable="d"
d:DesignWidth="640" d:DesignHeight="480"
Title="Page1 Page">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0.225*"/>
<RowDefinition Height="0.775*"/>
</Grid.RowDefinitions>
<riaControls:DomainDataSource
x:Name="MyData"
LoadSize="20"
QueryName="GetAlumnos"
AutoLoad="True">
<riaControls:DomainDataSource.DomainContext>
<ds:ServiciosAlumnos></ds:ServiciosAlumnos>
</riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>
<ScrollViewer Margin="8,44,8,42" Grid.Row="1">
<StackPanel Height="230" Width="604">
<sdk:DataGrid x:Name="alumnosGrid" Height="100"/>
</StackPanel>
</ScrollViewer>
<TextBlock Margin="70,32,224,28" TextWrapping="Wrap" Text="Listado de alumnos"/>
</Grid>