WPF - 爲什麼我的按鈕內容與按鈕本身分開移動？

我在WPF應用程序中創建了一個TabControl。我重新模板化了TabItem，這樣我就可以在每個標籤頁頭上有一個按鈕來關閉它。到目前爲止，一切都很好。WPF - 爲什麼我的按鈕內容與按鈕本身分開移動？

我決定我現在想要閃亮的圓形按鈕，而不是默認的方形醜陋的東西。另外，我想使用圖片作爲我的按鈕內容，而不是簡單地將內容設置爲「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內容由於被選中而向上移動。那麼，爲什麼橢圓不會隨着其他內容而移動呢？任何人都知道這裏發生了什麼？

來源

2009-07-01 syazi

你爲什麼使用DataTemplate？你能發佈更多的代碼嗎？ – 2009-07-02 18:24:31

我在一小會兒之前解決了這個問題 - 關於它不應該是DataTemplate。我會稍微發佈我的解決方案。 – syazi 2009-07-06 16:16:58

很抱歉的延遲反應 - 我最終通過後，張貼一個造型我的TabItem模板解決問題this blogpost。我相信這個問題是由於我的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>

來源

2009-07-06 16:24:54 syazi

每當我在DockPanel內部有控件時，如果我明確附加了DockPanel.Dock的其中一個控件來到我想要佔據填充部分的元素之後，它似乎總是起作用。雖然我不知道這是否會回答你的問題，試試這個，而不是在你的ClosableTabItemTemplate的DataTemplate：

<Grid> 
    <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="*"/> 
    <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 

    <ContentPresenter Grid.Column="0"/> 

    <Button Grid.Column="1"/> 
</Grid>

來源

2009-07-01 15:22:56 opedog

WPF - 爲什麼我的按鈕內容與按鈕本身分開移動？

回答

相關問題