برنامج الأغذية العالمي - لماذا محتوى بلدي أزرار تتحرك بشكل منفصل عن الزر نفسه؟

Question

ولقد خلق TabControl علبة في تطبيق WPF أنا أكتب. أنا أعيد قالب-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 تتحرك صعودا بسبب ذلك اختياره. لماذا، إذن، هو القطع الناقص لا يتحول مع المحتويات الأخرى؟ أي شخص لديه أي فكرة عما يجري هنا؟

Answer 1

وعذرا على التأخير في الرد - انتهى بي الأمر حل المشكلة عن طريق النمذجة قالب TabItem بلدي بعد نشر واحدة في <لأ href = "http://geekswithblogs.net/kobush/archive/2007/04/08/closeabletabitem. ASPX "يختلط =" نوفولو 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>

Answer 2

وكلما لدي الضوابط داخل DockPanel، يبدو دائما للعب حتى إذا كان أحد الضوابط لقد تعلق صراحة DockPanel.Dock ليأتي بعد عنصر أريد أن تناول الجزء التعبئة. ورغم أنني لا أعرف إذا كان هذا سوف أجيب على سؤالك، حاول هذا بدلا من ذلك في حياتك ClosableTabItemTemplate DataTemplate:

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

  <ContentPresenter Grid.Column="0"/>

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