首页 > 解决方案 > 工具栏选项卡旁边但不在内部的 WPF 启动按钮

问题描述

我不知道如何让按钮留在和Razveljavi旁边。我不希望它在工具栏中,而是在右侧,因此无论您在哪个选项卡上,它都会一直显示。OsnovnoVstavi

有一张我得到了什么以及我希望它看起来如何的图片。如果有人可以帮助我,那就太好了。我确定这只是一个小问题,但我刚开始使用 WPF。

应用程序截图

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="22"/>
        <RowDefinition Height="55"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="25"/>
    </Grid.RowDefinitions>

    <Menu Grid.Row="0" Grid.ColumnSpan="2">
        <MenuItem Header="Datoteka">
            <MenuItem Header="Odpri"/>
            <MenuItem Header="Shrani"/>
            <MenuItem Header="Izhod" Click="izhod"/>
        </MenuItem>
        <MenuItem Header="Uredi">
            
        </MenuItem>
        <MenuItem Header="Orodja">
            
        </MenuItem>
    </Menu>
    <TabControl Grid.Row="1" Grid.ColumnSpan="2">
        <TabItem Header="Osnovno">
            <ToolBarTray>
                <ToolBar>
                    <Button Content="Pisava"/>
                    <Button Content="Barva" Click="spreminjanjeBarve"/>
                </ToolBar>
                <ToolBar>
                    <Button Content="Kopiraj" Click="kopiraj">
                    </Button>
                    <Button Content="Izreži"/>
                    <Button Content="Prilepi" Click="prilepi"/>
                </ToolBar>
                <ToolBar>
                    <Button Content="Razveljavi"/>
                    <Button Content="Ponovi"/>
                </ToolBar>
            </ToolBarTray>
            
        </TabItem>
        <TabItem Header="Vstavi"/>
    </TabControl>
    <RichTextBox Name="box" Grid.Row="2" Background="LightBlue" GotFocus="RichTextBox_GotFocus" LostFocus="RichTextBox_LostFocus">
        <FlowDocument>
            <Paragraph Name="tekst">
                Vpiši tekst
                <Bold>tukaj</Bold> .
            </Paragraph>
        </FlowDocument>
    </RichTextBox>
    <StatusBar Grid.Row="3">
        <TextBlock Name="status"/>
    </StatusBar>
</Grid>

标签: wpfxamlcustom-controlstabcontrolcontroltemplate

解决方案


这并不像看起来那么容易。您本质上想要做的是向现有控件添加控件和功能。为了将按钮添加到选项卡条,您必须创建自定义控件模板,因为它定义了控件的外观和视觉状态。要向这些按钮添加功能,您必须创建自定义附加属性或创建自定义控件。

我个人认为更简洁的方法是为这种情况创建一个自定义控件。为了使其灵活,我们在选项卡条中为任何类型的附加内容创建了一个区域,甚至允许为其定义数据模板。

首先,创建一个类,该类派生自TabControl并添加要显示的内容的依赖属性以及任意内容的可选数据模板。

public class MyTabControl : TabControl
{
   static MyTabControl()
   {
      DefaultStyleKeyProperty.OverrideMetadata(typeof(MyTabControl), new
         FrameworkPropertyMetadata(typeof(MyTabControl)));
   }

   public static readonly DependencyProperty AdditionalTabStripContentTemplateProperty = DependencyProperty.Register(
      nameof(AdditionalTabStripContentTemplate), typeof(DataTemplate), typeof(MyTabControl), new PropertyMetadata(null));

   public static readonly DependencyProperty AdditionalTabStripContentProperty = DependencyProperty.Register(
      nameof(AdditionalTabStripContent), typeof(object), typeof(MyTabControl), new PropertyMetadata(null));

   public DataTemplate AdditionalTabStripContentTemplate
   {
      get => (DataTemplate)GetValue(AdditionalTabStripContentTemplateProperty);
      set => SetValue(AdditionalTabStripContentTemplateProperty, value);
   }

   public object AdditionalTabStripContent
   {
      get => GetValue(AdditionalTabStripContentProperty);
      set => SetValue(AdditionalTabStripContentProperty, value);
   }
}

通过复制和调整 的默认样式,为带有附加选项卡条内容的新选项卡控件创建样式,TabControl可以使用 Blend 或 Visual Studio 提取该样式。

<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="MyTabControlStyle" TargetType="{x:Type local:MyTabControl}">
   <Setter Property="Padding" Value="2"/>
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
   <Setter Property="VerticalContentAlignment" Value="Center"/>
   <Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
   <Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type local:MyTabControl}">
            <Grid x:Name="templateRoot" 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>
               <StackPanel Orientation="Horizontal">
                  <TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                  <ContentControl Content="{TemplateBinding AdditionalTabStripContent}" ContentTemplate="{TemplateBinding AdditionalTabStripContentTemplate}" Height="{Binding Height, ElementName=headerPanel}" Margin="0, 2, 0, 0"/>
               </StackPanel>
               <Border x:Name="contentPanel" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="2">
                  <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
               </Border>
            </Grid>
            <ControlTemplate.Triggers>
               <Trigger Property="TabStripPlacement" Value="Bottom">
                  <Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
                  <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                  <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                  <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                  <Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
               </Trigger>
               <Trigger Property="TabStripPlacement" Value="Left">
                  <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                  <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                  <Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
                  <Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
                  <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                  <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                  <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                  <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                  <Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>
               </Trigger>
               <Trigger Property="TabStripPlacement" Value="Right">
                  <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                  <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                  <Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
                  <Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
                  <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                  <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                  <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                  <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                  <Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
               </Trigger>
               <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

此样式与默认样式几乎相同。不同之处在于下面的几行。我们使用 aStackPanel将 a 添加ContentControl到选项卡标题面板的右侧,并将其内容和模板绑定到我们自定义控件的属性。我们还将Height内容控件的 绑定到选项卡标题面板,因此它看起来很干净。

<StackPanel Orientation="Horizontal">
   <TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
   <ContentControl Content="{TemplateBinding AdditionalTabStripContent}" ContentTemplate="{TemplateBinding AdditionalTabStripContentTemplate}" Height="{Binding Height, ElementName=headerPanel}" Margin="0, 2, 0, 0"/>
</StackPanel>

要总结样式,请创建一个隐式样式,以便将其自动应用于MyTabControl范围内的所有 s。

<Style TargetType="{x:Type local:MyTabControl}" BasedOn="{StaticResource MyTabControlStyle}"/>

现在用TabControl这个替换你的 XAML 中的并添加标签条内容,例如:

<local:MyTabControl Grid.Row="1" Grid.ColumnSpan="2">
   <local:MyTabControl.AdditionalTabStripContent>
      <StackPanel Orientation="Horizontal">
         <Button Content="Razveljavi"/>
         <Button Content="Ponovi"/>
      </StackPanel>
   </local:MyTabControl.AdditionalTabStripContent>
   <!-- ...your other tab items. -->
</local:MyTabControl>

很酷的一点是,您可以在此处添加任何内容,甚至可以在其中添加数据模板。结果:

StackPanel 的结果

此模板的唯一缺点是选项卡标题无法折叠成多行。如果你StackPanel用这个替换上面的DockPanel,你会得到一个响应更快的版本,但它会让右边框上的按钮永久对齐。

<DockPanel LastChildFill="True">
   <ContentControl DockPanel.Dock="Right" Content="{TemplateBinding AdditionalTabStripContent}" ContentTemplate="{TemplateBinding AdditionalTabStripContentTemplate}" Height="{Binding Height, ElementName=headerPanel}" Margin="0, 2, 0, 0"/>
   <TabPanel DockPanel.Dock="Left" x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
</DockPanel>

结果是一个正常大小的窗口和一个强制标签页眉折叠的小窗口:

DockPanel 的结果

DockPanel 小结果


推荐阅读