Home Forums WPF controls Xceed Toolkit Plus for WPF Inconsistent behavior of MaterialTabItem in a ControlTemplate

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • rebeldev
    Participant
    Post count: 7
    #43726 |

    Using the material tab controls, I want to display three tabs with rounded top corners. I also want the unselected tabs to have an orange foreground and the selected tab to have a green foreground. Finally I want a red InkEffectBrush when I press a tab.

    Here is my XAML. There is no added code-behind. I have no tab item content since it’s not relevant.

    <Window x:Class="MaterialTabsWithRoundedCorners.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
            Title="MainWindow" Height="100" Width="525">
        <Grid Background="LightBlue">
            <xctk:MaterialTabControl Margin="100,15,100,10">
                <xctk:MaterialTabControl.Resources>
                    <Style x:Key="myStyle" TargetType="{x:Type xctk:MaterialTabItem}">
                        <Setter Property="Foreground" Value="Orange"/>
                        <Setter Property="SelectedForeground" Value="Green"/>
                        <Setter Property="InkEffectBrush" Value="Red"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type xctk:MaterialTabItem}">
                                    <Border>
                                        <Grid>
                                            <Grid>
                                                <Border CornerRadius="15,15,0,0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}"/>
                                            </Grid>
                                            <Border BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                                                <ContentPresenter ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                                              VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                            </Border>
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </xctk:MaterialTabControl.Resources>
                <xctk:MaterialTabItem x:Name="tabItem1" Header="Tab Item 1" Style="{StaticResource myStyle}"/>
                <xctk:MaterialTabItem x:Name="tabItem2" Header="Tab Item 2" Style="{StaticResource myStyle}"/>
                <xctk:MaterialTabItem x:Name="tabItem3" Header="Tab Item 3" Style="{StaticResource myStyle}"/>
            </xctk:MaterialTabControl>
        </Grid>
    </Window>

    When I run the application, the first tab has a green foreground, while the other tabs have an orange foreground. The tabs do have rounded corners. However, as I press the second tab (or the third tab), I do not see the red InkEffectBrush. After I press the second tab, the first tab now has an orange foreground, but the tab I just pressed does not have a green foreground. All tabs now have an orange foreground.

    Do I have to incorporate the Foreground, SelectedForeground, and InkEffectBrush properties into the ControlTemplate? If so, what code is required to do this?

    What else, if anything, do I need to do?

    Thank you in advance.

    Fawzi [Xceed]
    Member
    Post count: 722

    Hi,

    You have redefine the MaterialTabItem ControlTemplate, but you didn’t include the “PART” objects. 2 of them are necessary in order to be able to use all the MaterialTabItem features : “PART_HeaderGrid” and “PART_InkCanvas”.

    From what I understand, everything you want from MaterialTabItem is available, except the Rounded corners. case 165664 has been created. It will be fixed in v3.1.

    You have 2 options :

    1) Copy the original MaterialTabItem controlTemplate, reference it and add the rounded corners :
    In file Xceed.Wpf.Toolkit/MaterialControls/MaterialTabs/Themes/Generic.xaml, use the controlTemplate with key “MaterialTabTemplate”. Set the CornerRadius of the “mainBorder”.

    2) Modify the original MaterialTabItem controlTemplate and add the rounded corners.
    As explained in 1), Set the CornerRadius of the “mainBorder”.

    Diane [Xceed]
    Moderator
    Post count: 1353

    The fix for this issue was included in the latest version.

    “In MaterialTabItem, the property CornerRadius is now available to customize the corners the of TabItems.”

    Download Link: http://forums.xceed.com/latest-xceed-toolkit-plus-for-wpf

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.