在 WPF TabControl 上 - 我可以在选项卡标题旁边添加内容吗?

发布于 2024-08-04 07:15:44 字数 396 浏览 3 评论 0原文

有没有一种简单的方法可以将另一个控件(即按钮)内联放置在 WPF 中选项卡标题的右侧?

在网络中,我会使用浮动或绝对定位来完成此任务。

这张图中的红线就是我想要达到的目标: A 控件在 WPF 选项卡旁边
(来源:jonkragh.com

谢谢! 乔恩

Is there an easy way to position another control (i.e. a button) inline and to the right of tab headers in WPF?

In the web, I would use a float or absolute positioning to accomplish this.

The red line in this picture is what I am trying to get to:
A control alongside of WPF Tabs
(source: jonkragh.com)

Thanks!
Jon

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

十六岁半 2024-08-11 07:15:44

执行此操作的可靠方法是重新模板化 TabControl,就像我为 ActiveAwareCommand 示例

<ControlTemplate x:Key="TabControlTemplate" TargetType="TabControl">
    <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="ColumnDefinition0"/>
            <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
            <RowDefinition x:Name="RowDefinition1" Height="*"/>
        </Grid.RowDefinitions>
        <Grid Panel.ZIndex="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TabPanel Margin="2,2,2,0" x:Name="HeaderPanel" IsItemsHost="true" KeyboardNavigation.TabIndex="1"/>
            <Button Grid.Column="1" Command="{Binding DataContext.CloseCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">X</Button>
        </Grid>
        <Border x:Name="ContentPanel" Grid.Column="0" Grid.Row="1" BorderBrush="#D0CEBF" BorderThickness="0,0,1,1" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                <Border Background="{TemplateBinding Background}">
                    <Grid x:Name="PART_ItemsHolder"/>
                </Border>
            </Border>
        </Border>
    </Grid>
</ControlTemplate>

注意 TabPanelButton 永远不能重叠。结果:

替代文本

The robust way to do this is to re-template the TabControl as I did for the close button in my ActiveAwareCommand sample:

<ControlTemplate x:Key="TabControlTemplate" TargetType="TabControl">
    <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="ColumnDefinition0"/>
            <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
            <RowDefinition x:Name="RowDefinition1" Height="*"/>
        </Grid.RowDefinitions>
        <Grid Panel.ZIndex="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TabPanel Margin="2,2,2,0" x:Name="HeaderPanel" IsItemsHost="true" KeyboardNavigation.TabIndex="1"/>
            <Button Grid.Column="1" Command="{Binding DataContext.CloseCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">X</Button>
        </Grid>
        <Border x:Name="ContentPanel" Grid.Column="0" Grid.Row="1" BorderBrush="#D0CEBF" BorderThickness="0,0,1,1" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                <Border Background="{TemplateBinding Background}">
                    <Grid x:Name="PART_ItemsHolder"/>
                </Border>
            </Border>
        </Border>
    </Grid>
</ControlTemplate>

Notice how the TabPanel and Button can never overlap. Result:

alt text

萌辣 2024-08-11 07:15:44

与在 Web 上的操作方式类似,您只需将选项卡控件和浮动控件放入网格内,并设置浮动控件的边距以使其位于正确的位置。您还可以使用 Canvas 元素来包含 Grid 和浮动控件并设置 Canvas.Left 和 Canvas.Top。

如果选项卡在编译时未确定,您可能需要动态测量每个选项卡的宽度。

Similar to how you would do it on the web, you can just put the tab control and floating control inside a Grid and set the margins of the floating control to get it in the right spot. You could also use a Canvas element to contain the Grid and floating control and set the Canvas.Left and Canvas.Top.

You might need to dynamically measure the width of each tab, if the tabs are not determined at compile time.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文