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

Note - Tips - Trick - .Net

0.0 (0 đánh giá)
Tạo bởi K9 Cập nhật lần cuối 00:13 28-06-2018 2.079 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

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

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>

 


Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Nội dung bài viết

Tác giả

K9

Nhà sáng lập Howkteam.com & tác giả các khóa học C#, Auto, Unity3D, Python....

Với mong muốn mang đến kiến thức chất lượng, miễn phí cho mọi người, với tâm huyết phá bỏ rào cản kiến thức từ việc giáo dục thu phí. Tôi đã cùng đội ngũ Kteam đã lập nên trang website này để thế giới phẳng hơn.
Hãy cùng chúng tôi lan tỏa kiến thức đến cộng đồng! 

Khóa học

Note - Tips - Trick - .Net

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

Đánh giá

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.