WPF- 내 버튼 콘텐츠가 버튼 자체에서 별도로 움직이는 이유는 무엇입니까?
-
21-08-2019 - |
문제
내가 작성하는 WPF 응용 프로그램에서 TabControl을 만들었습니다. Tabitem을 다시 설정하여 각 탭 헤더에 버튼을 닫을 수 있습니다. 지금까지 모든 것이 좋고 좋습니다.
나는 이제 기본 정사각형 추악한 것 대신 반짝이는 둥근 버튼을 원한다고 결정했습니다. 또한 내용을 단순히 "x"로 설정하는 대신 버튼 콘텐츠로 이미지를 사용하고 싶었습니다.
내 XAML 스타일/템플릿 :
<Style TargetType="{x:Type Button}" x:Key="EllipseButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Ellipse Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"/>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Button.Content}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="ClosableTabItemTemplate">
<DockPanel MinWidth="120" Margin="0,0,0,0">
<ContentPresenter
Content="{Binding Path=DisplayName}"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<Button
Command="{Binding Path=UnSubscribeApplicationCommand}"
CommandParameter="{Binding Path=DisplayName}"
BorderBrush="Black"
BorderThickness="2"
VerticalContentAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="Right"
DockPanel.Dock="Right"
Width="16" Height="16">
<Image Source="closeicon.bmp" Height="8" Width="8"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button.Style>
<Style TargetType="{x:Type Button}"
BasedOn="{StaticResource EllipseButtonStyle}">
<Setter Property="Background"
Value="{StaticResource CloseOffButtonBrush}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource CloseOnButtonBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</DockPanel>
</DataTemplate>
그러나 위의 코드가 제자리에 있으면 선택한 탭 컨텐츠 (및 배경도)가 선택한 것으로 가정 한 바에 따라 위쪽으로 이동하는 것으로 보입니다. 그렇다면 왜 타원이 다른 콘텐츠로 바뀌지 않는가? 누구든지 여기서 무슨 일이 일어나고 있는지 아는 사람이 있습니까?
해결책
지연된 응답에 대해 죄송합니다 - 게시 한 후 탭 템플릿을 모델링하여 문제를 해결했습니다. 이 블로그 포스트. 나는 내 tabitem 템플릿이 대조군이 아닌 DataTemplate로 정의되고 있다는 사실 때문에이 문제가 나타 났다고 생각합니다. 다음은 새로운 템플릿입니다.
<ControlTemplate x:Key="ClosableTabItemTemplate" TargetType="TabItem">
<Grid SnapsToDevicePixels="true">
<Border x:Name="Bd" Background="{StaticResource TabItemUnselectedBrush}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" >
<DockPanel x:Name="ContentPanel">
<Button Command="{Binding Path=UnSubscribeApplicationCommand}" BorderBrush="Black" HorizontalAlignment="Center" Margin="3,0,3,0" VerticalAlignment="Center" Width="16" Height="16" DockPanel.Dock="Right" ToolTip="Close Tab">
<Button.Content>
<Image Source="pack://application:,,,/Resources/Close.png" Height="8" Width="8" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button.Content>
<Button.Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource EllipseButtonStyle}">
<Setter Property="Background" Value="{StaticResource CloseOffButtonBrush}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource CloseOnButtonBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<ContentPresenter x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{Binding Path=DisplayName}" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
</DockPanel>
</Border>
</Grid>
<!-- bunch of ControlTemplate triggers to style the TabItem background color/position -->
</ControlTemplate>
다른 팁
DockPanel 내부에 컨트롤이있을 때마다, 내가 명시 적으로 DockPanel.dock을 첨부 한 컨트롤 중 하나가 채우기 부분을 가져 가고 싶은 요소를 따라 오면 항상 재생되는 것 같습니다. 이것이 귀하의 질문에 답변 할 것인지 모르겠지만 CloseBetemTemplate DataTemplate에서 대신 시도해보십시오.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"/>
<Button Grid.Column="1"/>
</Grid>
제휴하지 않습니다 StackOverflow