WPF Наложение изображения с помощью кнопки
-
06-07-2019 - |
Вопрос
У меня есть пользовательский TabItem с кнопкой закрытия (обозначается X) на нем, чтобы его можно было легко закрыть.На этой вкладке я хочу поместить изображение или элемент границы, расположенный по центру с помощью кнопки закрыть в левом верхнем углу
Управляющим шаблоном для этого является
<ControlTemplate TargetType="{x:Type local:CloseableTabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" >
<DockPanel x:Name="ContentPanel">
<Button x:Name="PART_Close" Panel.ZIndex="1" HorizontalAlignment="Right" Margin="0,1,1,0" VerticalAlignment="Top" Width="16" Height="16" DockPanel.Dock="Right" Style="{DynamicResource CloseableTabItemButtonStyle}" ToolTip="Close Tab">
<Path x:Name="Path" Stretch="Fill" StrokeThickness="0.5" Stroke="#FF333333" Fill="#FF969696" Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Button>
<ContentPresenter Panel.ZIndex="0" x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
</DockPanel>
</Border>
</Grid>
(управляющие триггеры были удалены) И чтобы вставить границу / изображение в заголовок этой вкладки, я использую следующее
<TabControl Margin="0" TabStripPlacement="Left">
<local:CloseableTabItem>
<local:CloseableTabItem.Header>
<Border Height="50" Width="50" Background="Red" BorderThickness="1" BorderBrush="Black" Margin="5" />
</local:CloseableTabItem.Header>
</local:CloseableTabItem>
</TabControl>
Используя это, я получаю следующий результат:
альтернативный текст http://lloydsparkes.co.uk/files/CloseTab.png
Кажется, кнопка ограничивает ширину элемента Border, поэтому она не достигает полной ширины, которую я установил (она установлена в 50x50, поэтому должна быть квадратной).Я пытался поместить их на разные уровни Z, но, похоже, это сработало не так, как я ожидал.
Итак, вопрос в том, как я могу заставить кнопку накладывать пограничный контроль так, чтобы кнопка не влияла на размер пограничного контроля?
Решение
такое поведение связано с DockPanel здесь:
<DockPanel x:Name="ContentPanel">
<Button x:Name="PART_Close" Panel.ZIndex="1" HorizontalAlignment="Right" Margin="0,1,1,0" VerticalAlignment="Top" Width="16" Height="16" DockPanel.Dock="Right" Style="{DynamicResource CloseableTabItemButtonStyle}" ToolTip="Close Tab">
<Path x:Name="Path" Stretch="Fill" StrokeThickness="0.5" Stroke="#FF333333" Fill="#FF969696" Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Button>
<ContentPresenter Panel.ZIndex="0" x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
</DockPanel>
снимите панель dock и при необходимости измените свои свойства, и проблема будет устранена.