هل يبتلع رأس GroupBox في WPF نقرات الماوس؟

Question

ألقِ نظرة على هذا المثال البسيط جدًا لبرنامج WPF:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">

    <GroupBox>
        <GroupBox.Header>
            <CheckBox Content="Click Here"/>
        </GroupBox.Header>
    </GroupBox>
</Window>

إذن لدي GroupBox الذي يكون رأسه عبارة عن CheckBox.لقد قمنا جميعًا بشيء من هذا القبيل - عادةً ما تقوم بربط محتوى GroupBox بطريقة يتم تعطيله عند إلغاء تحديد CheckBox.

ومع ذلك، عندما أقوم بتشغيل هذا التطبيق والنقر فوق CheckBox، وجدت أنه في بعض الأحيان يتم ابتلاع نقرات الماوس الخاصة بي ولا تتغير حالة CheckBox.إذا كنت على حق، فذلك عندما أنقر على الصف المحدد من وحدات البكسل التي يوجد عليها الحد العلوي لـ GroupBox.

يمكن للشخص تكرار هذا؟لماذا يحدث هذا، وهل هناك طريقة للتغلب عليه؟

يحرر:يؤدي تعيين BorderThickness الخاص بـ GroupBox إلى 0 إلى حل المشكلة، ولكن من الواضح أنه يزيل الحدود، لذلك لا يبدو مثل GroupBox بعد الآن.

Answer 1

يبدو أنه خطأ خفي في قالب التحكم الخاص بـ GroupBox.لقد وجدت أنه من خلال تحرير القالب الافتراضي لـ GroupBox ونقل الحدود المسماة "الرأس" إلى العنصر الأخير في عنصر الشبكة لقوالب التحكم، يتم حل المشكلة من تلقاء نفسها.

والسبب هو أن أحد عناصر الحدود الأخرى التي تحتوي على TemplateBinding of BorderBrush كان موجودًا في أسفل الشجرة المرئية وكان يلتقط النقر بالماوس، ولهذا السبب فإن تعيين BorderBrush على القيمة null يسمح لـ CheckBox باستقبال النقر بالماوس بشكل صحيح.

فيما يلي النمط الناتج لـ GroupBox.وهو مطابق تقريبًا للقالب الافتراضي لعنصر التحكم، باستثناء عنصر الحدود المسمى 'الرأس'، والذي أصبح الآن الطفل الأخير للشبكة، وليس الثاني.

<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>

<Style x:Key="GroupBoxStyle1" TargetType="{x:Type GroupBox}">
    <Setter Property="BorderBrush" Value="#D5DFE5"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupBox}">
                <Grid SnapsToDevicePixels="true">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="6"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="6"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
                    <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"/>
                    <Border Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
                        <Border.OpacityMask>
                            <MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
                                <Binding Path="ActualWidth" ElementName="Header"/>
                                <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                                <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                            </MultiBinding>
                        </Border.OpacityMask>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                            <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                        </Border>
                    </Border>
                    <Border x:Name="Header" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Padding="3,1,3,0">
                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

تقوم إجابة إيان أوكس بتعبئة ترتيب علامات التبويب بحيث يأتي الرأس بعد المحتوى.من الممكن تعديل قالب التحكم بحيث لا يمكن التركيز على الحدود.

للقيام بذلك، قم بتعديل القالب بحيث يكون الحدان الثاني والثالث (كلاهما في صف الشبكة 1) IsHitTestVisible=false

النموذج الكامل أدناه

<BorderGapMaskConverter x:Key="GroupBoxBorderGapMaskConverter" />

<Style x:Key="{x:Type GroupBox}" TargetType="{x:Type GroupBox}">
    <Setter Property="Control.BorderBrush" Value="#FFD5DFE5" />
    <Setter Property="Control.BorderThickness" Value="1" />
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupBox}">
                <Grid SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="6" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="6" />
                    </Grid.RowDefinitions>
                    <Border Name="Header" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1">
                        <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                    </Border>
                    <Border CornerRadius="4" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="{TemplateBinding Control.BorderThickness}" BorderBrush="#00FFFFFF" Background="{TemplateBinding Control.Background}" IsHitTestVisible="False" />
                    <ContentPresenter Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
                    <Border CornerRadius="4" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="4" BorderThickness="{TemplateBinding Control.BorderThickness}" BorderBrush="#FFFFFFFF" IsHitTestVisible="False">
                        <UIElement.OpacityMask>
                            <MultiBinding Converter="{StaticResource GroupBoxBorderGapMaskConverter}" ConverterParameter="7">
                                <Binding ElementName="Header" Path="ActualWidth" />
                                <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}" />
                                <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}" />
                            </MultiBinding>
                        </UIElement.OpacityMask>
                        <Border BorderThickness="{TemplateBinding Control.BorderThickness}" BorderBrush="{TemplateBinding Control.BorderBrush}" CornerRadius="3">
                            <Border BorderThickness="{TemplateBinding Control.BorderThickness}" BorderBrush="#FFFFFFFF" CornerRadius="2" />
                        </Border>
                    </Border>                        
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 3

الحل البديل الذي قمت به هو تنفيذ OnApplyTemplate في GroupBox المشتق:

public override void OnApplyTemplate()
{
  base.OnApplyTemplate();
  if (Children.Count == 0) return;

  var grid = GetVisualChild(0) as Grid;
  if (grid != null && grid.Children.Count > 3)
  {
    var bd = grid.Children[3] as Border;
    if (bd != null)
    {
      bd.IsHitTestVisible = false;
    }
  }
}

Answer 4

إذا قمت بتغيير BorderBrush الخاص بـ GroupBox، فسيعمل!

<GroupBox BorderBrush="{x:Null}">

أعلم أن هذا يهزم الهدف ولكنه يثبت أين تكمن المشكلة!