1. 程式人生 > WINDOWS開發 >WPF TabItem設定Visibility隱藏Control內容

WPF TabItem設定Visibility隱藏Control內容

原文:WPF TabItem設定Visibility隱藏Control內容

源自MSDN問題。

思路很簡答:

TabControl因為只顯示TabItem的選擇項的control。

所以單獨的設定tabitem的control或者使用control的觸發器都是不起作用的。

只有用controltemplate。

關鍵程式碼如下:

技術分享圖片
<Style x:Key="c1" TargetType="TabItem">
            <Style.Triggers>
                <!--關鍵程式碼 可以多寫一個hidden-->
                    <DataTrigger Binding="
{Binding Visibility,RelativeSource={RelativeSource Mode=Self} }" Value="Collapsed"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <ContentControl Visibility="
Collapsed" Content="{Binding}"/> </DataTemplate> </Setter.Value> </Setter> </DataTrigger> <!--關鍵程式碼--> <DataTrigger Binding="{Binding Visibility,RelativeSource={RelativeSource Mode=Self} }
" Value="Visible"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <ContentControl Visibility="Visible" Content="{Binding}"/> </DataTemplate> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style>
技術分享圖片

通過資料觸發器來檢測tabitem的visibility的屬性來設定control屬性。

完整程式碼

技術分享圖片
<Window.Resources>
        <Style x:Key="c1" TargetType="TabItem">
            <Style.Triggers>
                <!--關鍵程式碼 可以多寫一個hidden-->
                    <DataTrigger Binding="{Binding Visibility,RelativeSource={RelativeSource Mode=Self} }" Value="Visible">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ContentControl Visibility="Visible" Content="{Binding}"/>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="t1" BasedOn="{StaticResource c1}" TargetType="TabItem">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=cb1,Path=IsChecked}" Value="true">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="t2" BasedOn="{StaticResource c1}" TargetType="TabItem">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=cb2,Path=IsChecked}" Value="true">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <CheckBox x:Name="cb1">
                <CheckBox.Content>
                    <TextBlock>
                        <Run Text="Item1 狀態:"/>
                        <Run Text="{Binding ElementName=item1,Path=Visibility,Mode=OneWay}"/>
                    </TextBlock>
                </CheckBox.Content>
            </CheckBox>
            <CheckBox  x:Name="cb2">
                <CheckBox.Content>
                    <TextBlock>
                        <Run Text="Item2 狀態:"/>
                        <Run Text="{Binding ElementName=item2,Mode=OneWay}"/>
                    </TextBlock>
                </CheckBox.Content>
            </CheckBox>
        </StackPanel>
        <TabControl Grid.Column="1"  >
            <TabItem Header="item1" x:Name="item1"  Style="{StaticResource t1}" >
                 
                <Grid Background="Red">
                    
                </Grid>
            </TabItem>
            <TabItem Header="item2"  x:Name="item2" Style="{StaticResource t2}">
                <Grid  Background="Black">

                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
技術分享圖片

截圖

技術分享圖片