Come faccio a rendere i miei Blocchi di testo delle dimensioni corrette nella mia app C# XAML Windows 8.1?

Question

Sono nuovo nello sviluppo di Windows 8.1, quindi perdonami se questa domanda è ovvia o rudimentale. Ho sperimentato un po 'i vari attributi, e non riesco a farlo funzionare nel modo in cui lo voglio, quindi ho pensato che forse qualcuno qui potrebbe darmi una mano.

una descrizione di quello che sto facendo: Ho fatto un controllo utente in modo da poter isolare l'interfaccia utente per questa cosa che sto cercando di fare, e anche così posso usarlo in diversi luoghi nel mio vero UI. UserControl consiste in un Button con un Grid in esso. Il Grid ha le definizioni per 3 righe e Desidero che le righe (e gli elementi Border e TextBlock che contengono) occupino il 20% dell'altezza totale, il 60% dell'altezza e il 20% dell'altezza per le righe 0 , 1 e 2, rispettivamente. Voglio anche che lo Grid occupi l'intera altezza dello Button.

Ecco il markup XAML per UserControl, con colori sgargianti, quindi è ovvio dove tutto è.

<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> 

Questo è ciò che sembra nella finestra di progettazione:

Si noti che il testo bianco, che è in riga 1 (height = "6 *"), non è 3 volte più alto della riga 0 e della riga 2. Per quanto ho capito, l'altezza = "6 *" rispetto all'altezza = "2 *" dovrebbe rendere la riga 1 più grande delle righe 0 e 2. In questo caso, ovviamente, sono evidente qualcosa di ovvio ma non so cosa sia.

Qualche idea sul perché i TextBlock non stanno dimensionando nel modo in cui li voglio? Non ci sono DesignTemplates esterni che influenzano lo stile di uno qualsiasi degli elementi (per quanto posso dire, anche se non sono sicuro se c'è un modo per me di determinare in modo esplicito/esauriente se questo è vero o meno) .

A per lo più estranei a parte: Nel caso in cui questo aiuta a qualcun altro, ho scoperto che mettendo un margine = "0, -10" sul pulsante sarà sbarazzarsi di zona rossa attorno al pulsante all'interno della griglia esterna. Ci è voluto un po 'per capirlo, quindi spero che salvi qualcun altro un po' di tempo. Ci può essere un ThemeResource che ha lo stesso effetto, ma se così non l'ho mai trovato.

Answer 1

TL; DR: Impostare HorizontalContentAlignment e VerticalContentAlignment a Stretch

Il ContentPresenter nel pulsante ha la proprietà HorizontalAlignment e VerticalAlignment legati rispettivamente alla proprietà HorizontalContentAlignment e VerticalContentAlignment. Puoi vederlo nel modello di controllo predefinito trovato su MSDN.

<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> 

Perché il vostro Grid è in realtà all'interno il presentatore contenuti, si riempie quello spazio (non l'intero spazio del pulsante).Impostando tali proprietà su Stretch, lo ContentPresenter riempie lo spazio disponibile, che anche lo Grid esegue, fornendo il comportamento corretto.

Answer 2

Nel pulsante impostare l'allineamento del contenuto orizzontale e verticale su Stira. Questo allungherà la griglia del contenuto.

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