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>
代わりに上記のコードでは、しかし、選択されたタブのコンテンツ(及び同様に背景)ので、私は原因が選択されるまで上向きに移動TabItemsコンテンツであると仮定ものの上方にシフトすると思われます。なぜ、その後、楕円は、他のコンテンツとシフトしていませんか?誰もがここで何が起こっているか任意のアイデアを持っている?
解決
申し訳ありません - 私は<のhref = "http://geekswithblogs.net/kobush/archive/2007/04/08/closeabletabitemに投稿されたものの後に私のTabItemテンプレートをモデル化することによって、問題を解決することになりました。 ASPX」のrel = "nofollowをnoreferrer">このブログ投稿する。私は、この問題が原因私のTabItemテンプレートはDataTemplateのように定義されていたという事実のために、ではないことがあったはずとのControlTemplateとして浮上したと信じています。ここで新しいテンプレートがあります:
<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.Dockを添付しましたコントロールの1つに、私は塗りつぶし部分を取るしたい要素の後に来る場合、最大果たしているようです。これは、あなたの質問にお答えします場合、私は知りませんが、代わりにあなたのClosableTabItemTemplateのDataTemplateでこれを試してみます:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"/>
<Button Grid.Column="1"/>
</Grid>