Jack Gray
Jack Gray

Reputation: 309

Display tabitem content depending on condition

I want to display the Tab Item content depending on a property. Is it possible?

To explain, I have a another xaml which is embedded in the main xaml as below

<TabItem Header="TabItem" >
   <view:PaneView1 />
</TabItem>

Now I have another PaneView2. Depending on a condition on one inner xaml should be displayed as below

<TabItem Header="TabItem" >
   <!-- Condition here - if (x == true)-->
      <view:PaneView1 />
   <!-- else -->
      <view:PaneView2 />
</TabItem>

Is this possible?

Upvotes: 0

Views: 1613

Answers (2)

SamTh3D3v
SamTh3D3v

Reputation: 9944

there are several solution to that, the easiest one is by using a DataTrigger and set the Content based on you condition

 <TabControl>
    <TabItem Header="TabItem" >
        <TabItem.Style>
            <Style TargetType="TabItem">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Condition}" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <view:PaneView1 />
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Condition}" Value="False">
                        <Setter Property="Content" >
                            <Setter.Value>
                                    <view:PaneView2 />
                                </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TabItem.Style>                    
    </TabItem>
    </TabControl>

the Condition

 private bool _condition = false;
 public bool Condition
 {
     get
     {
         return _condition;
     }

     set
     {
         if (_condition == value)
         {
             return;
         }

         _condition = value;
         OnPropertyChanged();
      }
 }

Upvotes: 1

Dennis
Dennis

Reputation: 37760

Use trigger to switch visibility between view:PaneView1 and view:PaneView2:

<StackPanel>
    <CheckBox x:Name="MyCheckBox" Content="Edit value"/>
    <TabControl>
        <TabItem Header="TabItem">
            <TabItem.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock x:Name="MyTextBlock" Text="You can't edit me"/>
                        <TextBox x:Name="MyTextBox" Visibility="Collapsed" Text="You can edit me"/>
                    </Grid>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsChecked, ElementName=MyCheckBox, UpdateSourceTrigger=PropertyChanged}" Value="True">
                            <Setter TargetName="MyTextBlock" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="MyTextBox" Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </TabItem.ContentTemplate>
        </TabItem>
    </TabControl>
</StackPanel>

You can bind to any value in DataTrigger.Binding - either from UI or from data context (sample code is bound to UI).

Upvotes: 0

Related Questions