We Keep Coding

Insert a vertical scrollbar to see the content of tab items

I was working with WinForms and I am kind of new in WPF, I want to insert a vertical scrollbar to see all the elements content in my TabItems, this is my previous WinForm and this is my new WPF: I have implemented the following xaml-code:
<StackPanel Grid.Row="0" Grid.Column="0"
Orientation="Horizontal" Margin="0,0,0,199.2">
<TabControl x:Name="tabControl">
<TabItem Header="1" Background="#008000"/>
<TabItem Header="2" Background="#1e90ff"/>
<TabItem Header="3" Background="#bd3f02"/>
<ScrollBar></ScrollBar>
</TabControl>
</StackPanel>

Depending on what you want to display inside of your tabs, your issue might be solved by using a suitable items control which comes with a ScrollViewer out-of-the-box. Since I do not know your exact use case, I present you a general solution. From the images that you provided you want your tab content to be scrollable. To achieve this, remove the ScrollBar and place a ScrollViewer into each of the tabs that you want to scroll.
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Margin="0,0,0,199.2">
<TabControl x:Name="tabControl">
<TabItem Header="1" Background="#008000">
<ScrollViewer>
<!-- Your tab content here -->
</ScrollViewer>
</TabItem>
<TabItem Header="2" Background="#1e90ff"/>
<TabItem Header="3" Background="#bd3f02"/>
</TabControl>
</StackPanel>
The vertical scrollbar will be shown if the content exceed its container by default. If you want to display it always, set the VerticalScrollBarVisibility property to Visible.
<ScrollViewer VerticalScrollBarVisibility="Visible">

What you might want to try is encapsulating the content in a ScrollViewer like so :
<StackPanel>
<ScrollViewer>
<Grid>
<!-- YOUR CONTENT HERE -->
</Grid>
</ScrollViewer>
</StackPanel>

WPF - Dynamic content in dynamics TabControls

Even the title makes me laugh...
So, my code looks like that so far :
<Grid>
<WrapPanel x:Name="wpVTList" Margin="70,356,1541,150">
<TabControl ItemsSource="{Binding VTList}"
TabStripPlacement="Left"
Padding="0,10,0,0"
x:Name="tcVTList">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Width="270"
FontSize="20"
FontFamily="Calibri"
Margin="0,5,0,5"
Padding="30,0,0,0"
Height="27"
VerticalAlignment="Center"
HorizontalAlignment="Left" MouseUp="tbkVTList_MouseUp" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</WrapPanel>
Here is my MainWindow, or at least the window which will display everything, where I create as much tabs as I have in an ObservableCollection of string, which is supposed to be filled dynamically by a query or something.
Beside, I've created two customs userControls like that :
<UserControl x:Class="Configurateur.Configuration.TableauEcrans"
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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
d:DesignHeight="175" Width="470">
<Grid>
<Grid.Resources>
...
</Grid.Resources>
<telerik:RadGridView ItemsSource="{Binding CamerasList}"
AutoGenerateColumns="False"
ClipToBounds="True"
IsSynchronizedWithCurrentItem="True"
telerik:StyleManager.Theme="Windows8"
CanUserFreezeColumns="False">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"
Header="Name"
UniqueName="Name"
Width="*"
HeaderTextAlignment="Center" />
<telerik:GridViewDataColumn DataMemberBinding="{Binding Price}"
Header="Price"
UniqueName="Price"
Width="65"
HeaderTextAlignment="Center" />
<telerik:GridViewDataColumn DataMemberBinding="{Binding Amount}"
Header="Amount"
UniqueName="Amount"
Width="100"
HeaderTextAlignment="Center" />
</telerik:RadGridView.Columns>
</telerik:RadGridView>
</Grid>
</UserControl>
And then, back to my MainWindow I can use them by adding :
<Grid x:Name="gridTableaux" Margin="376,356,0,0">
<custom:UCCameras Margin="10,41,944,453" />
<custom:UCOwner Margin="10,411,1054,0" />
</Grid>
right after my wrapPanel. It works, they're all here. I put them in a grid in order to delimit where is the dynamic area in my MainWindow. Each userControl is a gridView, and a gridView is filled by an ObservableCollection of a class (i.e. Camera.cs) which contains properties like Name, bounded to the columns in my UC.
What I want to do is to display a new userControl in my MainWindow for each tab, with different informations. For example, if a user fills a row in the gridView in the first tab, he has to find an empty gridView if he chooses another tab. And then, if he comes back to the first tab, he is supposed to see what he wrote in the gridView at the beginning.
1) I don't really see how to use my UCs in each tab since they are created dynamically. I don't know where to put them in my code since I want them to be in the grid (the one which delimits the area where everything happens), at the other side of the MainWindow, or kind of.
2) I have absolutly no idea of how to save these entered values between each tab, and how to choose which one I can use (because of the dynamic way).
I suppooosed... that each tab is a list (ObservableCollection works fine for everything I do) of an OC of class. So my class is a camera (= a row of my gridView) with properties (= cells in my row), contained in an ObservableCollection (= what my gridView has), contained in an ObservableCollection> (= my tabs, with the main grid inside).
Any idea ? I hope I did something that makes sense for what I try to do, I'm still new in WPF. Maybe an OC of UC..?
Thanks for your help !

Fixing size in xaml file

I'm newbie with Wpf application i have this interface
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Alg="clr-namespace:AS.Views.DeformableModel"
xmlns:Controls="clr-namespace:Assergs.Windows.Controls;assembly=Assergs.Windows" x:Class="AS.Window1"
Title="Window1"
>
<Grid Margin="0,0,2,0">
<Controls:RibbonPanel Header="Menu" HorizontalAlignment="Left" Margin="0,0,0,31.405" Width="213.388">
<TreeView Width="210.449" HorizontalAlignment="Left" Margin="0,0,0,-1.515"/>
</Controls:RibbonPanel>
<StatusBar Margin="0,472.595,0,0.972" VerticalAlignment="Bottom">
<Label Content="Pret" Height="41.433" Width="36.737"/>
</StatusBar>
<StackPanel Margin="213.388,0,0,31.405">
<Image Height="473.5" Source="image-interface2.jpg"/>
</StackPanel>
</Grid>
</Window>
i got as a result:
as you saw, there is many design error i need to know :
How can i display the image at the full stackpanel space ?
why the RibbonPanel controller disappeared?
How can i change my snippet to make all controller's size depending to the size of the window (image,treeview...)

I think you should to know about wpf's panels and layouts. The grid is an excellent panel and you can get almost any common layout. But for getting this you should works with columns and rows (not only with margins and vertical/horizontal orientations). The stack panel is not the best control for stretching an image: if the stackpanel's orientation is vertical the item'a height is the item's desired height, and if the orientation is horizontal, the item's width is the item's desired width, so, if you want to stretch the image you can group it inside a content control, or (if there is no more controls) do not group.
I suggest you to use a dockpanel, the dock panel alows you put the items in the locations top, right, bottom and left:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Alg="clr-namespace:AS.Views.DeformableModel"
xmlns:Controls="clr-namespace:Assergs.Windows.Controls;assembly=Assergs.Windows" x:Class="AS.Window1"
Title="Window1"
>
<DockPanel Margin="0,0,2,0">
<Controls:RibbonPanel DockPanel.Dock="Left" Header="Menu" Width="213.388">
<TreeView /> <!--The tree view will be vertican and horizontally stretch-->
</Controls:RibbonPanel>
<StatusBar DockPanel.Dock="Bottom" Height="41.433">
<Label Content="Pret" Width="36.737"/>
</StatusBar>
<Image Stretch="UniformToFill" Source="image-interface2.jpg"/> <!--The last item take all aviable space-->
</DockPanel>
</Window>
Hope this helps...

Read about Layout Containers.
http://www.codeproject.com/Articles/140613/WPF-Tutorial-Layout-Panels-Containers-Layout-Trans
In your case you may use dock panel as parent panel.
Use Grid or Border instead panels. (I have not tested this code)
<DockPanel Margin="0,0,2,0">
<Grid DockPanel.Dock="Bottom">
<Label Content="Pret" Height="41.433"/>
</Grid>
<Grid DockPanel.Dock="Left" Width="213">
<TreeView Width="210.449" HorizontalAlignment="Left"/>
</Grid>
<Grid>
<Image Source="image-interface2.jpg" Stretch="Fill"/>
</Grid>
</Grid>

How can I add extra content to a WPF TabControl? [duplicate]

This question already has answers here:
WPF: template or UserControl with 2 (or more!) ContentPresenters to present content in 'slots'
(3 answers)
Closed 3 years ago.
I have a custom ControlTemplate for a WPF TabControl that adds Buttons to the left and right hand side of the TabItem header. At the moment this is not a named part as the button commands are bound in the ControlTemplates XAML and do not need to be exposed outside of the ControlTemplate.
This works fine for a button but what if I want to add content to the left (or right) hand side of the TabItemHeaders which can be bound outside of the ControlTemplate so that my TabControl becomes more flexible?
My idea was to subclass the TabControl and have two named parts in the ControlTemplate and expose these as properties of the new control; CustomTabControl.LeftContentArea and CustomTabControl.RightContentArea respectively. Each named part is a ContentPresenter and each ContentPresenters Content property is exposed by the properties named above.
However, when I tried this I was unable to put content into the left and right content areas.
Edit: Just to be clear I have included an image. The red rectangles show where I want to be able to place extra content.
Update: Below is a screen shot of the progress I have made so far, hopefully this will help explain my problem a bit more.
The screen shot shows my custom Tab Control with two blank tabs and three buttons that are currently on the right hand side of the TabItem header area. The buttons are currently defined in the TabControls custom ControlTemplate I.E. there is a ColumnDefinition within the ControlTemplates Grid which contains a StackPanel that hosts 3 buttons.
What I am looking for is a way to allow the consumer of the tab control decide what content goes in the area next to the tabs. E.G. the user should be able to do something like this:
<local:CustomTabControl>
<local:CustomTabControl.RightContentArea>
<!-- This can be changed to ANY content that the user wants -->
<StackPanel Orientation="Horizontal">
<Button Content="Test" />
<Button Content="Test" />
<Button Content="Test" />
</StackPanel>
</local:CustomTabControl.RightContentArea>
<!-- TabItems are added as normal -->
<TabItem Header="Tab One" />
<TabItem Header="Tab Two" />
</local:CustomTabControl>

I tried a different (lazy) way, which was to create another grid that occupies the same space as the TabControl, ie both are in Grid.Row=0. I have bound the grid height to the height of the first tab so if the tabs change height the other controls will remain centered. I set MinWidth on the window so the controls dont overlap the tabs.
Paste this code into a new WPF Window...
<Window x:Class="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"
mc:Ignorable="d"
Title="MainWindow" Height="306" Width="490" MinWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TabControl Grid.Row="0" x:Name="tabControl">
<TabItem x:Name="tabItem" Header="TabItem" Height="50">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
<Grid Grid.Row="0" Height="{Binding ActualHeight, ElementName=tabItem}"
VerticalAlignment="Top" Margin="0,2,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Center" Margin="20,0">
<TextBlock VerticalAlignment="Center" Margin="10,0" FontSize="16"
Foreground="Red" FontFamily="Calibri">My Text</TextBlock>
<Button Content="My Button" />
</StackPanel>
</Grid>
</Grid>
</Window>
...and you will get this:

Depending on how much flexibility you need there are some methods that are suited better than others, i myself try to use DynamicResources if possible because it is normally less troublesome than creating new user-controls.
Here's an example of how to add additional content to the left of the Tab-Header:
<TabControl>
<TabControl.Resources>
<DataTemplate x:Key="AugmentedTabItem">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{DynamicResource ContentLeft}" Margin="0,0,5,0"/>
<ContentPresenter Content="{Binding}"/>
</StackPanel>
</DataTemplate>
</TabControl.Resources>
<TabItem Header="ÜberTab" HeaderTemplate="{StaticResource AugmentedTabItem}">
<TabItem.Resources>
<TextBlock x:Key="ContentLeft" Text=">>>" Foreground="Blue"/>
</TabItem.Resources>
</TabItem>
</TabControl>
Hope that helps, if something is unclear or if this doesn't suffice, drop a comment.

Button Content Margin

I can't work out how to get rid of the margin around a button's content. Here is some example XAML:
<Button Background="Red" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid Background="Blue" Margin="0">
<TextBlock Text="me" Padding="0"></TextBlock>
</Grid>
</Button>
I can't seem to get rid of the red bit. Has anyone got any ideas?

You need to change the control template for the button. You can have alook at the following links
http://mark-dot-net.blogspot.com/2007/07/creating-custom-wpf-button-template-in.html
http://msdn.microsoft.com/en-us/magazine/cc163497.aspx