كيف يمكنني استبدال محتوى زر WPF بالكامل بمسار رسومي؟

Question

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

هل يمكن لأي شخص أن يقدم لي تعليقات حول كيفية تحقيق ذلك؟يتم تعريف النمط على أنه؛

    <ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}">
        <Grid>
            <Path Fill="#ff951c1f" Data="F1 M 64,16 C 64,24 56,31 48,31 L 15,31 C 7,31 0,24 0,16 C 0,7 7,0 15,0 L 48,0 C 56,0 64,7 64,16 Z" />
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
        </Grid>
    </ControlTemplate>

استخدام هذا الزر هو؛

<StackPanel>
    <Button Template="{StaticResource CurvedButton}" FontFamily="MS Trebuchet" FontSize="40" Width="200" Height="120" Foreground="Black">XXXXXXXXXXX</Button>
</StackPanel>

عندما يتم كل شيء، يجب أن يبدو مثل زر أحمر متعرج.

شكرا لك مقدما

ريان

Answer 1

هناك بعض الأشياء التي يمكنك القيام بها للحصول على النتائج التي تبحث عنها.

ضع المسار في مربع العرض واجعله يمتد ليملأ:

<ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}">
    <Grid>
        <Viewbox Stretch="Fill">
            <Path Fill="#ff951c1f" Data="F1 M 64,16 C 64,24 56,31 48,31 L 15,31 C 7,31 0,24 0,16 C 0,7 7,0 15,0 L 48,0 C 56,0 64,7 64,16 Z" />
        </Viewbox>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
    </Grid>
</ControlTemplate>

استخدم حدًا بدلاً من المسار:

<ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}">
    <Grid>
        <Border CornerRadius="40" Background="#ff951c1f">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
        </Border>
    </Grid>
</ControlTemplate>