wpf - 工具栏选项卡旁边但不在内部的 WPF 启动按钮
问题描述
我不知道如何让按钮留在和Razveljavi
旁边。我不希望它在工具栏中,而是在右侧,因此无论您在哪个选项卡上,它都会一直显示。Osnovno
Vstavi
有一张我得到了什么以及我希望它看起来如何的图片。如果有人可以帮助我,那就太好了。我确定这只是一个小问题,但我刚开始使用 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>
解决方案
这并不像看起来那么容易。您本质上想要做的是向现有控件添加控件和功能。为了将按钮添加到选项卡条,您必须创建自定义控件模板,因为它定义了控件的外观和视觉状态。要向这些按钮添加功能,您必须创建自定义附加属性或创建自定义控件。
我个人认为更简洁的方法是为这种情况创建一个自定义控件。为了使其灵活,我们在选项卡条中为任何类型的附加内容创建了一个区域,甚至允许为其定义数据模板。
首先,创建一个类,该类派生自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
用这个替换上面的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>
结果是一个正常大小的窗口和一个强制标签页眉折叠的小窗口:
推荐阅读
- google-maps - Google map API 按单词查找地点
- amazon-kinesis - 适用于 Web 应用程序的 Kinesis 生产者
- python - 如何在 Python 中从管道中读取?
- focus - Svelte:将焦点设置到自定义 Web 组件中的开槽元素
- c# - 从 C# 控制台应用程序访问 Azure Active Directory 并获得“权限不足,无法完成操作”。错误信息
- r - 链接重定向问题 - 使用 Rvest 在 R 中进行 Web Scraping
- microservices - 在 Hazelcast 缓存中存储常用的微服务实体?
- assembly - 编写汇编时使用哪个寄存器是否重要?
- oop - 面向对象设计——以可扩展的方式设计家具系统
- javascript - 元素在滚动时反复上下滑动