كيفية تعديل خلفية زر الموسع فقط؟WPF

Question

لدي موسع موضوع على نافذة ذات خلفية زرقاء وأرغب في جعل زر الموسع لونًا آخر غير اللون الافتراضي (الأزرق، الذي يستقبله من النافذة).عندما أقوم بتعديل خاصية الخلفية للموسع فإنه يغير الموسع بالكامل والرأس وكل شيء إلى اللون الجديد.ومع ذلك، أود تغيير الزر نفسه فقط.هل يمكن لأي شخص أن يوجهني إلى العقار المناسب الذي أبحث عنه؟شكرًا لك

Answer 1

ليس عليك فقط إعادة تصميم الموسع ...تحتاج إلى إعادة تصميم زر ToggleButton داخل قالب Expander ...بحيث يمكنك ربط القالب بمجموعة فرشاة الخلفية الموجودة على Expander طوال الطريق عبر مرئيات Expander وفي مرئيات ToggleButton (باستخدام اثنين من TemplateBindings).

أحد الأشياء المفيدة (على الأقل بالنسبة لي) عندما تتعلم كيفية تعديل العناصر المرئية لعناصر تحكم WPF هو استخدام SimpleStyles حيث يسهل نسخها وتعديلها...من الأنماط والقوالب العادية الكاملة.

للقيام بذلك، افتح Blend وانتقل إلى مكتبة الأصول (الأداة السفلية) ...إذا نقرت على ذلك سترى مجموعتين من عناصر التحكم:ضوابط النظام والأساليب البسيطة.احصل على أحد عناصر التحكم (أيهما تريد) من Simple Styles ثم ضعه على سطح التصميم.بعد ذلك، يمكنك النقر بزر الماوس الأيمن فوقه، ثم تحرير أجزاء التحكم (القالب)، وتحرير نسخة.سيؤدي هذا إلى إنشاء نسخة من نمط ونموذج Simple Styles...والتي يمكنك بعد ذلك (بسهولة أكبر) تعديلها لتناسب محتوى قلبك.

(يجب أن أشير في هذه المرحلة إلى أنني سأقوم بعد ذلك بتعديل xaml (الذي تم إنشاؤه بواسطة Blend) في كل من Visual Studio و Blend ...التقليب ذهابا وإيابا حسب الضرورة ...والاستفادة من نقاط القوة في كل من:مزيج لسطح تصميم WYSIWYG الخاص به ...وVisual Studio لتحرير التعليمات البرمجية ودعم IntelliSense.)

لقد قمت بصياغة بعض xaml السريع الذي ينفذ ما تطلبه وسوف أدرجه أدناه.يجب أن تكون قادرًا على إسقاط xaml هذا في Kaxaml أو محرر xaml آخر فضفاض.

أتمنى أن يساعدك هذا.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640"
    Height="480"
>
    <Page.Resources>
        <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#EEE" Offset="0.0"/>
            <GradientStop Color="#CCC" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
        <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#AAA" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#BBB" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="0.1"/>
            <GradientStop Color="#EEE" Offset="0.9"/>
            <GradientStop Color="#FFF" Offset="1.0"/>
        </LinearGradientBrush>

        <ControlTemplate x:Key="newToggleButtonControlTemplate" TargetType="{x:Type ToggleButton}">
            <Grid Background="{TemplateBinding Background}">
                <Rectangle
                    x:Name="Rectangle"
                    Margin="0,0,0,0"
                    Fill="Transparent"
                    Stroke="{DynamicResource NormalBorderBrush}"
                />
                <Path
                    x:Name="Up_Arrow"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Fill="{DynamicResource GlyphBrush}"
                    Data="M 0 0 L 4 4 L 8 0 Z"
                />
                <Path
                    x:Name="Down_Arrow"
                    Visibility="Collapsed"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Fill="{DynamicResource GlyphBrush}"
                    Data="M 0 4 L 4 0 L 8 4 Z"
                />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="true">
                    <Setter Property="Visibility" Value="Visible" TargetName="Down_Arrow"/>
                    <Setter Property="Visibility" Value="Collapsed" TargetName="Up_Arrow"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style x:Key="newExpanderStyle" TargetType="{x:Type Expander}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*" x:Name="ContentRow"/>
                            </Grid.RowDefinitions>
                            <Border
                                x:Name="Border"
                                Grid.Row="0"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="2,2,0,0"
                            >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="20"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton
                                        Template="{DynamicResource newToggleButtonControlTemplate}"
                                        Background="{TemplateBinding Background}"
                                        IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        OverridesDefaultStyle="True"
                                    />
                                    <ContentPresenter Grid.Column="1" Margin="4" RecognizesAccessKey="True" ContentSource="Header"/>
                                </Grid>
                            </Border>
                            <Border
                                x:Name="ExpandSite"
                                Grid.Row="1"
                                Visibility="Collapsed"
                                BorderThickness="1,0,1,1"
                                CornerRadius="0,0,2,2"
                            >
                                <ContentPresenter
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Margin="{TemplateBinding Padding}"
                                    Focusable="false"
                                />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Page.Background>
        <LinearGradientBrush EndPoint="0.997,0.996" StartPoint="0.002,0.058">
            <GradientStop Color="#FF63A6DE" Offset="0"/>
            <GradientStop Color="#FFC2DEF5" Offset="1"/>
        </LinearGradientBrush>
    </Page.Background>

    <Grid x:Name="LayoutRoot">
        <Expander
            Style="{DynamicResource newExpanderStyle}"
            Header="Expander"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Background="{DynamicResource NormalBrush}"
        >
            <Grid>
                <Button Content="Hello World"/>
            </Grid>
        </Expander>
    </Grid>
</Page>