Note - Tips - Trick - .Net

Lưu các thủ thuật, code mẫu, cách dùng về .Net

Tabcontrol custorm với tiêu đề và hình trên header Tabcontrol custorm với tiêu đề và hình trên header Tabcontrol custorm với tiêu đề và hình trên header Tabcontrol custorm với tiêu đề và hình trên header Tabcontrol custorm với tiêu đề và hình trên header 0/5 (13 reviews)

Tabcontrol custorm với tiêu đề và hình trên header

Đã đăng 2018-06-28 00:13:29 bởi K9
0 bình luận 834 lượt xem
Tabcontrol custorm với tiêu đề và hình trên header 0 /5 stars (0 reviews)
 

Template

<ControlTemplate TargetType="{x:Type TabItem}" x:Key="tabItemTemplate">
        <Border x:Name="tabBorder" Height="30" Width="110"
                                   Cursor="Hand"
                                    BorderBrush="{DynamicResource topMenuColor}" 
                                    BorderThickness="1" 
                                    VerticalAlignment="Bottom" 
                                    Margin="0" 
                                    CornerRadius="0" 
                                    Background="#f9f9f9">
            <ContentPresenter x:Name="tabContent" 
                                                  ContentSource="Header" 
                                                  RecognizesAccessKey="True" 
                                                  VerticalAlignment="Center" 
                                                  HorizontalAlignment="Center" >
                <ContentPresenter.ContentTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Margin="5 5 0 5" x:Name="imgHeader" Height="15" Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Border}, Path=Tag}"></Image>
                            <TextBlock Margin="5 5 0 5" VerticalAlignment="Center" Text="{Binding}"></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ContentPresenter.ContentTemplate>
            </ContentPresenter>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="False">
                <Setter TargetName="tabBorder" Property="Tag" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=TabItem}, Path=Tag}" />
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="tabBorder" Property="BorderThickness" Value="0 3 0 0" />
                <Setter TargetName="tabBorder" Property="Height" Value="35" />
                <Setter TargetName="tabBorder" Property="Margin" Value="0 0 0 -2"></Setter>
                <Setter TargetName="tabBorder" Property="BorderBrush" Value="{DynamicResource mainColor}" />
                <Setter TargetName="tabBorder" Property="Background" Value="White" />
                <Setter TargetName="tabBorder" Property="Tag" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=TabItem}, Path=DataContext}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

 

Cách dùng

 <TabItem Header="Danh mục" Tag="/Images/Daily Activity/video_red.png" DataContext="/Images/Daily Activity/video_gray.png" Template="{DynamicResource tabItemTemplate}"></TabItem>

 

Chia sẻ:
Thảo luận Hỏi và đáp Báo lỗi bài viết
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  

Chiến dịch

Kteam - Howkteam Free Education