باستخدام WPF, ما هي أفضل طريقة لتحديث خلفية مخصصة زر التحكم ؟

Question

في WPF, نحن إنشاء عناصر التحكم المخصصة التي ترث من زر مع استخلاصها تماما من الصفر xaml الرسومات.لدينا حدود حول كامل على زر xaml و نود أن موقع تحديث الخلفية عند تمرير الماوس=True في الزناد.ما نحتاج إلى معرفته هو كيف يمكننا تحديث خلفية الحدود في هذا الزر مع التدرج عند مرور الماوس فوق ذلك ؟

Answer 1

في ControlTemplate, تعطي Border a Name ويمكنك الرجوع في ذلك إلى أن جزءا من visual شجرة في المشغلات.وهنا قصيرة جدا مثال على تصفيف العادي Button:

<Style
    TargetType="{x:Type Button}">
    <Setter
        Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="customBorder"
                    CornerRadius="5"
                    BorderThickness="1"
                    BorderBrush="Black"
                    Background="{StaticResource normalButtonBG}">
                    <ContentPresenter
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger
                        Property="IsMouseOver"
                        Value="True">
                        <Setter
                            TargetName="customBorder"
                            Property="Background"
                            Value="{StaticResource hoverButtonBG}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

إذا كان هذا لا يساعد, سوف تحتاج إلى معرفة أكثر, ربما رؤية الخاص بك XAML.وصفك لا تجعل من الواضح جدا لي ما الفعلي الخاص بك البصرية الشجرة.

Answer 2

قد ترغب في إضافة تؤدي إلى مثل هذا...

جعل نمط من هذا القبيل:

<Style x:Key="ButtonTemplate"
             TargetType="{x:Type Button}">
    <Setter Property="Foreground"
                    Value="{StaticResource ButtonForeground}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate
                TargetType="{x:Type Button}">
                <Grid
                    SnapsToDevicePixels="True"
                    Margin="0,0,0,0">
                    <Border Height="20"
                                    x:Name="ButtonBorder"
                                    BorderBrush="{DynamicResource BlackBorderBrush}">
                        <TextBlock x:Name="button"
                                             TextWrapping="Wrap"
                                             Text="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
                                             SnapsToDevicePixels="True"
                                             Foreground="#FFFFFFFF"
                                             Margin="6,0,0,0"
                                             VerticalAlignment="Center"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <!-- Disabled -->
                    <Trigger Property="IsMouseOver"
                                     Value="True">
                        <Setter TargetName="ButtonBorder"
                                        Property="Background"
                                        Value="{DynamicResource ButtonBackgroundMouseOver}" />
                        <Setter TargetName="ButtonBorder"
                                        Property="BorderBrush"
                                        Value="{DynamicResource ButtonBorderMouseOver}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ثم إضافة بعض الموارد التدرجات, مثل هذا:

<LinearGradientBrush x:Key="ButtonBackgroundMouseOver"
                                         EndPoint="0.5,1"
                                         StartPoint="0.5,0">
    <GradientStop Color="#FF000000"
                                Offset="0.432"/>
    <GradientStop Color="#FF808080"
                                Offset="0.9"/>
    <GradientStop Color="#FF848484"
                                Offset="0.044"/>
    <GradientStop Color="#FF787878"
                                Offset="0.308"/>
    <GradientStop Color="#FF212121"
                                Offset="0.676"/>
</LinearGradientBrush>

واسمحوا لي أن أعرف إذا كنت بحاجة إلى مزيد من المساعدة مع هذا.