C# XAML Windows 8.1 uygulamasında TextBlock'larımın doğru boyutlarda olmasını nasıl sağlayabilirim?

Question

Windows 8.1 geliştirme konusunda yeniyim, bu sorunun açık mı yoksa ilkel mi olduğu için beni affet. Çeşitli özniteliklerle biraz uğraştım ve istediğim gibi çalışamıyorum, bu yüzden belki birisinin bana yardım edebileceğini düşündüm.

Yaptığım şeyin açıklaması: Kullanıcı Arabirimi'ni yaptığım bu tek şey için UI'yi izole edebilmem ve aynı zamanda gerçek UI'mdeki çeşitli yerlerde kullanabilmem için bir UserControl yaptım. UserControl, içinde bir Grid bulunan bir Button oluşur. Grid, 3 satır için tanımlara sahiptir ve Satırları (ve içerdikleri Border öğeleri ve TextBlock öğeleri) toplam yüksekliğin% 20'sini, yüksekliğin% 60'ını ve satırların% 20'sinin yüksekliğini almak istiyorum 0 Sırasıyla 1 ve 2,. Ayrıca Grid'un Button'un tüm yüksekliğini almasını istiyorum.

Burada, her şeyin olduğu yerde açıkça görülebilen, UserControl'ün XAML işaretlemesi yer alır.

<UserControl 
    x:Name="UserControlRoot" 
    d:DesignHeight="300" 
    d:DesignWidth="400" 
    mc:Ignorable="d" 
> 
    <Grid x:Name="LayoutRoot" Margin="0" Background="Red"> 
     <Grid.Resources> 
      <Style TargetType="TextBlock" x:Key="UCTextBlock"> 
       <Setter Property="FontSize" Value="20" /> 
       <Setter Property="TextAlignment" Value="Center" /> 
       <Setter Property="TextWrapping" Value="NoWrap" /> 
      </Style> 
     </Grid.Resources> 
     <!-- THIS BUTTON HAS SPACING AROUND IT - WHY? --> 
     <Button 
      VerticalAlignment="Stretch" 
      HorizontalAlignment="Stretch" 
      BorderBrush="White" 
      BorderThickness="5" 
      Background="Green" 
      Padding="0" 
      Foreground="Blue" 
      Margin="0" 
     > 
      <Grid Background="#ff333333"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="2*" /> 
        <RowDefinition Height="6*" /> 
        <RowDefinition Height="2*" /> 
       </Grid.RowDefinitions> 

       <Border Grid.Row="0" HorizontalAlignment="Stretch"> 
        <TextBlock Text="THIS IS MY RED TEXT" Foreground="LightCoral" Style="{StaticResource UCTextBlock}" /> 
       </Border> 
       <Border Grid.Row="1" HorizontalAlignment="Stretch"> 
        <TextBlock Text="THIS IS MY WHITE TEXT, NOT TALL" Foreground="White" Style="{StaticResource UCTextBlock}" /> 
       </Border> 
       <Border Grid.Row="2" HorizontalAlignment="Stretch"> 
        <TextBlock Text="THIS IS MY BLUE TEXT" Foreground="LightSkyBlue" Style="{StaticResource UCTextBlock}" /> 
       </Border> 
      </Grid> 
     </Button> 
    </Grid> 
</UserControl> 

Bu

o tasarımcı gibi görünür:

Notu (= "6 *" Yükseklik) Satır 1'de beyaz metin, değil olduğunu Satır 0 ve Satır 2 kadar uzun 3x. Anladığım kadarıyla, Yükseklik = "6 *" vs Yükseklik = "2 *" Satır 1'i Satırlar 0'dan ve 2'den daha büyük hale getirmelidir. Açıkça burada bariz bir şeyi yanlış anladım ama ne olduğunu bilmiyorum.

TextBlock'ların neden istediğim gibi boyutlandırılmadığına dair bir fikir var mı? Öğelerin herhangi birinin stilini etkileyen harici bir DesignTemplates yoktur (bunu anlayabildiğim kadarıyla, gerçekten durumun gerçekten olup olmadığını kesin olarak belirtmek için bir yöntem olup olmadığından emin değilim) .

bir kenara çoğunlukla-ilgisiz: Bu bir başkası yardımcı durumda, bir Marjı = koyarak "0, -10" düğmesini dış Izgara içindeki düğme etrafında kırmızı alanın kurtulmak edeceği ortaya çıktı. Bunu anlamak biraz zaman aldı, bu yüzden umarım bir başkasını kurtaracak. Aynı etkiye sahip bir ThemeResource olabilir, ancak eğer böyle bir şey bulamadım.

Answer 1

TL; DR: düğmesini Stretch

ContentPresenter için HorizontalContentAlignment ve VerticalContentAlignment Set sırasıyla HorizontalContentAlignment ve VerticalContentAlignment özelliğine bağlı olarak HorizontalAlignment ve VerticalAlignment özelliğine sahiptir. Bunu, MSDN'da bulunan varsayılan kontrol şablonunda görebilirsiniz. senin Grid aslında içerik sunucusu içinde olduğu için

<Grid> 
... 
<Border x:Name="Border" 
     Background="{TemplateBinding Background}" 
     BorderBrush="{TemplateBinding BorderBrush}" 
     BorderThickness="{TemplateBinding BorderThickness}" 
     Margin="3"> 
    <ContentPresenter x:Name="ContentPresenter" 
        Content="{TemplateBinding Content}" 
        ContentTransitions="{TemplateBinding ContentTransitions}" 
        ContentTemplate="{TemplateBinding ContentTemplate}" 
        Margin="{TemplateBinding Padding}" 
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
             AutomationProperties.AccessibilityView="Raw"/> 
       </Border> 
       ... 
      </Grid> 

, bu doldurmasını uzay (düğmesinin tamamını değil boşluk).Bu özellikleri Stretch olarak ayarlayarak ContentPresenter var olan boş alanı doldurun, Grid sonra da size doğru davranışı veriyor.

Answer 2

Düğmede, Yatay ve dikey içerik hizalamasını Stretch olarak ayarlayın. Bu içerik ızgarasını gerecek.

<Button HorizontalContentAlignment="Stretch" ... 
</Button>