Düğmeye neden olmadan WPF düğmesinin içinde denetime kadar boyutta şekil ve çizgiler nasıl çizilir?

Question

Hızlı bir Google'ım vardı ve StackOverflow'u hızlı bir şekilde inceledim, ancak bu soruna giren başka birini bulamadım.

İçinde küçük bir X ile yakın bir düğme oluşturmak istiyorum. Kapat düğmesi, içinde bulunan öğenin üzerine geldiğinizde, farenin üzerine geldiğinizde rengini değiştirdiğinizde ve her zamanki WPF sevimliliğinde kaybolup kaybolur. Alt satır, o kadar zor olmalı, ama bu aşamaya bile gelmeden önce en garip konulardan birine giriyorum.

İşte düğmesine uygun XAML tarzım:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style x:Key="TabCloseButtonStyle" TargetType="{x:Type Button}"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Content"> 
      <Setter.Value> 
       <Grid> 
        <Line Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}" 
          X1="0" 
          Y1="0" 
          X2="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Mode=OneWay}" 
          Y2="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualHeight, Mode=OneWay}"/> 
        <Line Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}" 
          X1="0" 
          Y1="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualHeight, Mode=OneWay}" 
          X2="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Mode=OneWay}" 
          Y2="0"/> 
       </Grid> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary> 

Ve ben böyle sadece test olarak, benim düğmesi oluşturmak:

<Window x:Class="WpfTestApp.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="124" Width="569"> 
    <Grid Background="#2b3c59"> 
     <StackPanel Orientation="Horizontal"> 

      <!-- Other controls removed for clarity --> 

      <Button Style="{DynamicResource TabCloseButtonStyle}" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Bottom" 
        Padding="2" 
        Margin="0, 10, 0, 0" 
        MinWidth="50" 
        MinHeight="50"></Button> 
     </StackPanel> 
    </Grid> 
</Window> 

Ve işte hepsi berbat gidene nerede. Uygulamayı çalıştırdığınızda, düğme, pencerenin yüksekliğine ulaşana kadar sonsuza kadar, bir anda bir piksel, yatay ve dikey olarak genişleyecektir.

Şimdi bunun neden olduğunu anlayabiliyorum: Çizgiler, Grid'in bir birim tarafından genişlemesine neden olan Grid'in genişliğinin ve yüksekliğinin ötesindeki bir birime gider, ardından bir geçiş var, veri bağlaması satırların yeniden çizilmesine neden olur, ebediyen.

Yani, bunu denemek ve bununla uğraşmaya karar verdim, ama bir adımda HorizontalAlignment ve VerticalAlignment ile ne yaparsam yapayım, hem Canvas hem de Grid ile sıfır genişlik ve yüksekliğe sahip olurum. demek ki, çarmıha gerilmem, ki bu da büyük ölçüde rahatsız edici. Düğmenin ActualWidth ve ActualHeight özelliklerine bağlanırsam, düğmenin ortası ortalanmış sol üst köşesi olan bir X ile sonuçlanır.

Bunu düzeltmek için neler yapabileceğimi bilen var mı? Herhangi bir işaretçi için son derece minnettar olurdum - WPF hala benim için oldukça yeni bir canavar.

Teşekkürler! Bunun yerine bağlanmasının

Answer 1

gibi bir şey öneririm.Gördüğünüz gibi, bağlamalar ve mizanpaj sistemleri konserde çalışmaz (bence veri aktarımı mizanpaj üzerinde önceliğe sahiptir, ancak sizin durumunuzda, düzen başka bir veri bağlama işlemine neden olur)

Oldukça güzel görünmeniz gerekir gerilebilir X sadece Yol ile: yerine streç düğme boyutu ile ölçeğine bunu istiyorsanız

<Path Data="M0,0 L1,1 M0,1 L1,0" Stretch="Uniform" Stroke="Red" /> 

(ölçek belirgin çizgi genişliğini etkiler), o zaman sadece bir ViewBox

Answer 2

, ben

Yani örnek ile sorun gibi görünüyor şu

<Grid Margin="2"> 
    <Line X1="0" Y1="0" Y2="1" X2="1" Stroke="Black" Stretch="Fill" /> 
    <Line Y1="1" X2="1" Stroke="Black" Stretch="Fill" /> 
</Grid> 

---

Güncelleme gibi Stretch ve Marj veya Dolgu özelliklerini kullanarak öneririm min yükseklik & genişlik. Sadece yükseklik & genişliği kullanamıyorsanız, ben sadece düzeni yapmak bağlamaları başvurmak zorunda olmamalıdır aşağıdaki

<Grid MinHeight="{TemplateBinding MinHeight}" MinWidth="{TemplateBinding MinWidth}"> 
    <Line X1="0" Y1="0" Y2="1" X2="1" Stroke="Black" Stretch="Fill" /> 
    <Line Y1="1" X2="1" Stroke="Black" Stretch="Fill" /> 
</Grid> 

Answer 3

sayesinde herkes kullanabilir . Rob'un Viewbox ile çözümü, çözüm olduğu ortaya çıktı. AnaWindow.xaml'daki Düğme bildiriminden MidWidth ve MinHeight öznitelikleri kaldırılsa bile düğme mükemmel şekilde hareket eder.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style x:Key="TabCloseButtonStyle" TargetType="{x:Type Button}"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Content"> 
     <Setter.Value> 
      <Grid> 
       <Viewbox> 
        <Path Data="M0,0 L10,10 M0,10 L10,0" 
          Stretch="Uniform" 
          Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground, Mode=OneWay}" /> 
       </Viewbox> 
      </Grid> 
     </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary> 

tekrar teşekkürler tüm önerileri için:

İşte benim modifiye tarzı bu!