surajitk
surajitk

Reputation: 147

WPF Tabcontrol Same kind of template for all Tabs

Iam working around with WPF in my desktop application. In my XAML code , i have created a tab item with a listbox into it. Now, in my xaml.cs file, on button click iam adding 1 tab . What I wanted to do is, On button click, newly created tab should have listbox with other data. So, how do i maintain a similar template for all tabs which are created ? I know there are ways to create a similar style template for all tabitems. But i dont want to maintain same styles, but maintain same controls to whom i'll give datasource dynamically.

Here is my code xaml code:

                        <DataTemplate x:Key="ValueStyle" >
                            <TextBlock ToolTip="{Binding Path=Value}" VerticalAlignment="Center" Margin="2" Padding="2" Text="{Binding Path=Value}" />
                        </DataTemplate>

                        <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
                        <Setter Property="Focusable" Value="False"/>
                        <Setter Property="Width" Value="16"/>
                        <Setter Property="Height" Value="16"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <Border Width="16" Height="16" Background="Transparent" Padding="5,5,5,5">
                                        <Path x:Name="ExpandPath" Fill="Transparent" Stroke="#FF989898" Data="M0,0 L0,6 L6,0 z">
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="135" CenterX="3" CenterY="3"/>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="ExpandPath" Property="Stroke" Value="#FF1BBBFA"/>
                                            <Setter TargetName="ExpandPath" Property="Fill" Value="Transparent"/>
                                        </Trigger>

                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter TargetName="ExpandPath" Property="RenderTransform">
                                                <Setter.Value>
                                                    <RotateTransform Angle="180" CenterX="3" CenterY="3"/>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter TargetName="ExpandPath" Property="Fill" Value="#FF595959"/>
                                            <Setter TargetName="ExpandPath" Property="Stroke" Value="#FF262626"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.Resources>
                <ListBox.ItemTemplate>

                    <DataTemplate>

                      <StackPanel Orientation="Horizontal" MouseLeftButtonDown="ListItemClicked">
                         <Border Width="{Binding Path=Level, Converter={StaticResource ConvertLevelToIndent}}" />
                         <ToggleButton x:Name="tb" ClickMode="Press" IsChecked="{Binding Path=IsExpanded}" Style="{StaticResource ExpandCollapseToggleStyle}"/>
                                <TextBlock FontSize="14" Text="{Binding Path=r1}" Width="100" />

                                <TextBlock FontSize="14" Text="{Binding Path=r2}" Width="100" />


                        </StackPanel>
                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding Path=SubKeyCount}" Value="0">
                                <Setter Property="Visibility" TargetName="tb" Value="Hidden"/>
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Upvotes: 0

Views: 1011

Answers (1)

Sheridan
Sheridan

Reputation: 69959

Whenever you need to repeat the same part of a UI, you can just put that part (the UI elements) into a UserControl... that's exactly what they're for. Once you add your UI controls to the XAML, then you can add DependencyPropertys that will enable you to Bind data from outside the UserControl to be displayed and/or edited inside the control. Here's a simple example:

In UserControl code behind:

public static DependencyProperty YourCollectionProperty = DependencyProperty.Register(
    "YourCollection", typeof(ObservableCollection<string>), typeof(YourUserControl));

public ObservableCollection<string> YourCollection
{
    get { return (ObservableCollection<string>)GetValue(YourCollectionProperty); }
    set { SetValue(YourCollectionProperty, value); }
}

In UserControl XAML:

<ListBox ItemsSource="{Binding YourCollection, RelativeSource={RelativeSource 
    AncestorType={x:Type YourUserControl}}}" />

Then using your UserControl:

<YourXamlNamespacePrefix:YourUserControl YourCollection="{Binding SomeCollection}" />

And in another place:

<YourXamlNamespacePrefix:YourUserControl YourCollection="{Binding OtherCollection}" />

Upvotes: 1

Related Questions