تحويل المقياس في XAML (في ControlTemplate) على زر لإجراء "تكبير"

Question

لقد حصلت على زر مع صورة فيه ويتم تصميمه بما يلي:

<ControlTemplate x:Key="IconButton" TargetType="Button">
            <Border>
                <ContentPresenter Height="80" Width="80" />
            </Border>
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Opacity">
                            <DoubleAnimation From="1" To="0.5" Duration="0:0:0.5" />
                            <DoubleAnimation From="0.5" To="1" Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Width">
                            <DoubleAnimation From="80" To="95" Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

الزر كما يلي:

            <Button Template="{StaticResource IconButton}" Name="btnExit">
                <Image Source="Images/Exit.png" />
            </Button>

المشكلة هي أن العرض لا يتغير عندما ينتهي الماوس. (أو على الأقل - عرض الصورة لا ...)

أعتقد أن هناك تحويل "مقياس" يمكنني استخدامه لتكبير الزر وكل محتوياته؟ كيف أفعل ذلك هنا ...؟

شكرًا.

Answer 1

يبدو أن القالب الخاص بك ضئيلًا جدًا ، لكنني أفترض أن تبدأ للتو في العمل ، ومع ذلك سيساعدك ذلك على البدء في استخدام Scaletransform بدلاً من تحريك العرض.

ال scaletransform يمكن تطبيقه على RenderTransform خاصية إما الزر نفسه أو مجرد حدود القالب الخاص بك. هذا يمكن أن يكون TransformGroup إذا كنت ترغب في القيام بأكثر من مجرد مقياس (أي تحويل مركب يتكون من أشكال أخرى مثل الترجمة ، تدوير ، انحراف) ولكن للحفاظ على الأمر بسيطًا ، ومن الأمثلة على ذلك ، فإن ما يلي يطبق قيمة scaletrans واحدة على الزر:

<Button Template="{StaticResource IconButton}" Name="btnExit">
    <Button.RenderTransform>
        <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
    </Button.RenderTransform>
    <Image Source="Images/Exit.png" />
</Button>

أو هذا للتطبيق على حدود ControlTemplate:

<ControlTemplate x:Key="IconButton" TargetType="Button">
    <Border Background="Blue" x:Name="render">
        <Border.RenderTransform>
            <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
        </Border.RenderTransform>
        <ContentPresenter Height="80" Width="80" />
    </Border>
    ...
    ...

بعد ذلك ، سترغب في تغيير مشغل Mouseenter الخاص بك لاستهداف تلك الخاصية وعرضك ، ستحتاج إلى استهداف خاصية Scalex الخاصة بـ ScaletRansform. ستقوم لوحة القصة التالية بتوسيع نطاق الزر 2.5 مرة في اتجاه x (أضف TargetName="render" إلى <Storyboard... إذا كنت قد اخترت تطبيق التحويل على الحدود بدلاً من الزر).

<EventTrigger RoutedEvent="Mouse.MouseEnter">
    <BeginStoryboard>
        <Storyboard TargetProperty="RenderTransform.ScaleX">
            <DoubleAnimation To="2.5" Duration="0:0:0.2" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

إذا كنت تريد استخدام مجموعة تحويل مع عدد من التحويلات ، فستقوم بتغيير قيمة التهدفات إلى شيء مثل RenderTransform.(TransformGroup.Children)[0].ScaleX على افتراض أن Scaletransform هو أول طفل في المجموعة.

هذا يجب أن يجعلك تعمل بما تحتاجه ويمكنك أن تأخذ المكان الذي تريده من هناك ...

HTH