How to realize similar navigation bar effect in picture?

[roxxxxssss]

Can you give me a demonstration？ Thanks.

[timunie]

Hi @roxxxxssss

I can't provide an entire running demo, but maybe a TabControl with your own HeaderTemplate can suite your needs.

Happy coding
Tim

[roxxxxssss]

Thanks, I guess will this effect be a picture?

[timunie]

I don't get your question ⁉️

[roxxxxssss]

Thank you for your reply.

[timunie]

Update:

Here is a short sample:

The needed code is:

<TabControl>
    <TabControl.Resources>
        <DataTemplate x:Key="My.Templates.NavigateNext">
            <StackPanel Orientation="Horizontal">
                <ContentControl Content="{Binding}" />
                <TextBlock Margin="10,0,0,0">►</TextBlock>
            </StackPanel>
        </DataTemplate>
    </TabControl.Resources>
    <TabItem Header="Step 1" HeaderTemplate="{StaticResource My.Templates.NavigateNext}"/>
    <TabItem Header="Step 2" HeaderTemplate="{StaticResource My.Templates.NavigateNext}"/>
    <TabItem Header="Step 3" HeaderTemplate="{StaticResource My.Templates.NavigateNext}" />
    <TabItem Header="Step 4" HeaderTemplate="{StaticResource My.Templates.NavigateNext}"/>
    <TabItem Header="Step 5" />
</TabControl>

Happy coding
Tim

[roxxxxssss]

Thank you very much.It helped me a lot! thank you

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: ***@***.***&gt;; 发送时间: 2021年6月22日(星期二) 凌晨4:28 收件人: ***@***.***&gt;; 抄送: "自由"<229231207@QQ.com&gt;; ***@***.***&gt;; 主题: Re: [MahApps/MahApps.Metro] How to realize similar navigation bar effect in picture? (#4127) Update: Here is a short sample: The needed code is: <TabControl&gt; <TabControl.Resources&gt; <DataTemplate x:Key="My.Templates.NavigateNext"&gt; <StackPanel Orientation="Horizontal"&gt; <ContentControl Content="{Binding}" /&gt; <TextBlock Margin="10,0,0,0"&gt;►</TextBlock&gt; </StackPanel&gt; </DataTemplate&gt; </TabControl.Resources&gt; <TabItem Header="Step 1" HeaderTemplate="{StaticResource My.Templates.NavigateNext}"/&gt; <TabItem Header="Step 2" HeaderTemplate="{StaticResource My.Templates.NavigateNext}"/&gt; <TabItem Header="Step 3" HeaderTemplate="{StaticResource My.Templates.NavigateNext}" /&gt; <TabItem Header="Step 4" HeaderTemplate="{StaticResource My.Templates.NavigateNext}"/&gt; <TabItem Header="Step 5" /&gt; </TabControl&gt; Happy coding Tim — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.