ImageButtons بلا حدود في Wrappanel

Question

أحاول إنشاء Wrappanel مع PictionButtons غير الملحومة التي تحتوي على أعمال فنية. قمت بتجميع المحتوى التالي على أمل أن يوفر المظهر السلس المطلوب ؛ ومع ذلك ، بقي خط أبيض رفيع حول كل من الأزرار. هل يستطيع أحدكم أن يوجهني إلى الطريق الصحيح؟

<Button.ContentTemplate>
    <DataTemplate DataType="{x:Type local:ArtInfo}">
        <Border Name="border" BorderThickness="0" BorderBrush="blue" Height="280" Width="250" Background="#262c40">
            <StackPanel>
                <Grid>
                    <Grid.Resources>
                        <local:MyConverter x:Key="MyConverter"></local:MyConverter>
                        <ObjectDataProvider x:Key="Properties.Settings" ObjectType="{x:Type lcl:Properties.Settings}" />
                    </Grid.Resources>
                    <Image Name="ArtImage" Margin="10,15,0,0" Height="195" Width="195" VerticalAlignment="Top" >
                        <Image.Source>
                                  <Binding Path="ArtImage"/>
                        </Image.Source>
                    </Image>
               </Grid>
            <TextBlock Text="{Binding Path=ArtClass}" Margin="10,-17,0,0" FontSize="11" Foreground="white" />
            <TextBlock Text="{Binding Path=Student}" Margin="10,0,0,0" FontSize="11" Foreground="white" />
            <TextBlock Text="1998" Margin="10,0,0,0" FontSize="11" Foreground="white" />
        </StackPanel>
    </Border>
    </DataTemplate>
</Button.ContentTemplate>

Answer 1

يخبر ContentTemplate WPF كيفية عرض المحتوى داخل الزر - يبقى الزر كروم (مثل الحدود والخلفية) ، ويتم عرض المحتوى الملموس داخل هذا الكروم.

تريد استبدال بأكمله ظهور الزر والحدود وجميعها ، بدلاً من تخصيص كيفية عرض محتوىه. للقيام بذلك ، تحتاج إلى استخدام خاصية القالب بدلاً من ذلك. قيمة الزر. ضمن هذا ControlTemplate ، يمكنك استخدام ContentPresenter لعرض المحتوى "المعروف بالبيانات".

في حالتك ، نظرًا لأن datatemplate تقوم بكل العمل ، يمكنك الابتعاد عن المحتوى الخام كقالب الخاص بك:

<Button.Template>
  <ControlTemplate TargetType="Button">
    <ContentPresenter />
  </ControlTemplate>
</Button.Template>

ومع ذلك ، إذا كانت جميع الأزرار تستخدم نفس الخلفية ، فيمكنك نقل هذا إلى ControlTemplate:

<Button.Template>
  <ControlTemplate TargetType="Button">
    <Border BorderBrush="Blue" ...>
      <ContentPresenter />
    </Border>
  </ControlTemplate>
</Button.Template>

يمكنك بعد ذلك إزالة الحدود من datatemplate. هذا لا يهم حقًا فقط إذا كنت تخطط لإعادة استخدام الزر نفسه. في الاعتبار مع قوالب المحتوى الأخرى وأردت الحفاظ على ظهور الزر متسقة عبر أنواع مختلفة من المحتوى.

Answer 2

قم بإنشاء UserControl ، وضع Botton & Image في شبكة.

<Grid>
  <Image Source="icon.png" Panel.ZIndex="1" />
  <Button 
    Panel.ZIndex="2" 
    FocusVisualStyle="{x:Null}" 
    Background="Transparent"/>
</Grid>