Develop Reference

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:

Setting Full Width to WPF Image in C#

I'm trying to reduce my window size to 70%, in which there will be an image that will be stretched for 100% width and 30% (below the image) height, in which there is a stack panel containing some controls.
<Window x:Class="CapManageR.Video"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Video" Height="500" Width="1000"
Loaded="Window_Loaded" Closing="Window_Closing">
<Grid Name="grid1">
<Image Source="c://a.png" HorizontalAlignment="Stretch" Height="700"></Image>
<StackPanel Height="300" HorizontalAlignment="Stretch">
<Slider x:Name="horizSlider"
Minimum="0"
Maximum="100"
Value="50"
LargeChange="10"
SmallChange="1"
Width="200"
Margin="186,356,406,51"
PreviewMouseUp="horizSlider_PreviewMouseUp"/>
</StackPanel>
</Grid>
</Window>
I don't really know how to solve this. The above is my code so far. It is not really working. Can someone help so it will be proportional even upon resizing?

<Grid Name="grid1">
<Grid.RowDefinitions>
<RowDefinition Height="70*" />
<RowDefinition Height="30*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="c://a.png" Stretch="Fill" />
<StackPanel Grid.Row="1" >
....
</StackPanel>
</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.

wpf - Data Template, change template with button

my task is to make DataTemplate list, and create a button for changing the view.
I have the "Data" and "FootballTeam" classes, and also I have the Static Resources. I need help for the button event, how can I change the current template?
As a tip, the example says to use this method:
"this.Resources[resource-key] as data-type;"
The XAML:
<Window x:Class="WpfApplication11.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="250"
Width="300">
<Window.Resources>
<DataTemplate x:Key="teamName">
<TextBlock FontWeight="Bold"
Text="{Binding Path=TeamName}"></TextBlock>
</DataTemplate>
<DataTemplate x:Key="year">
<TextBlock Text="{Binding Path=FoundingYear}"></TextBlock>
</DataTemplate>
<DataTemplate x:Key="logo">
<Image Source="{Binding Path=Image}" />
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0"
AllowDrop="True">
<ListBox Name="lstTeams">
</ListBox>
</ScrollViewer>
<Button Grid.Row="1"
Margin="6">Change View</Button>
</Grid>
</Window>

I guess you want to change the listbox template so, try this :
In XAML
<Button Grid.Row="1" Margin="6" Click="changeTemplate">Change View</Button>
In C#
lstTeams.ItemTemplate = (DataTemplate)this.Resources["teamname"];
You have to handle the different templates you want to cycle through but, this is pretty much how to do it code-behind.

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>