Jak sprawić, że moje blokady TextBlock będą miały odpowiednie rozmiary w mojej aplikacji C# XAML Windows 8.1?

Question

Jestem nowy w rozwoju Windows 8.1, więc wybacz mi, jeśli to pytanie jest oczywiste lub podstawowe. Eksperymentowałem trochę z różnymi atrybutami i nie mogę sprawić, żeby działało tak, jak chcę, więc pomyślałem, że może ktoś tu mi pomoże.

Opis tego, co robię: Zrobiłem UserControl, dzięki czemu mogę wyizolować interfejs dla tej jednej rzeczy, którą próbuję zrobić, a także mogę go używać w różnych miejscach w moim rzeczywistym interfejsie użytkownika. UserControl składa się z Button z Grid w nim. Grid ma definicje dla 3 wierszy i Chcę, aby wiersze (oraz elementy Border, które zawierają) oraz TextBlock) zajmowały 20% całkowitej wysokości, 60% wysokości i 20% wysokości dla wierszy 0 , 1 i 2 odpowiednio:. Chcę również, aby Grid zajmował całą wysokość Button.

Oto oznaczenia XAML dla UserControl, jaskrawo kolorowe, więc jest oczywiste, gdzie wszystko jest.

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

To jak to wygląda w projektancie:

Zauważ, że biały tekst, który znajduje się w wierszu 1 (wysokość = "6 *"), jest nie 3 razy wyższe niż Wiersz 0 i Wiersz 2. O ile mi wiadomo, Wysokość = "6 *" vs Wysokość = "2 *" powinna sprawić, że Wiersz 1 będzie większy niż Wiersze 0 i 2. Oczywiście mam tu coś oczywistego , ale nie wiem, co to jest.

Jakieś pomysły na to, dlaczego TextBlocks nie są tak duże, jak tego chcę? Nie ma zewnętrznych szablonów DesignTemplate, które wpływają na styl dowolnego elementu (o ile mogę to stwierdzić, chociaż nie jestem pewien, czy istnieje sposób dla mnie, aby jednoznacznie/wyczerpująco określić, czy tak naprawdę jest) .

Przeważnie niepowiązany na bok: Jeśli pomogę komuś innemu, stwierdziłem, że umieszczenie Margin = "0, -10" na przycisku pozbędzie się czerwonego obszaru wokół przycisku w zewnętrznej siatce. Trzeba było chwilę to rozgryźć, więc mam nadzieję, że uratuje to kogoś jeszcze. Może istnieć obiekt ThemeResource, który ma taki sam efekt, ale jeśli tak, nigdy go nie znalazłem.

Answer 1

TL; DR: Ustaw HorizontalContentAlignment i VerticalContentAlignment do Stretch

ContentPresenter w przycisk ma swoją HorizontalAlignment i VerticalAlignment właściwość związaną z właściwością HorizontalContentAlignment i VerticalContentAlignment odpowiednio. Możesz to zobaczyć w domyślnym szablonie kontroli, który można znaleźć na 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> 

Ponieważ Grid jest rzeczywiście wewnątrz prezenter treść, która wypełnia przestrzeń (nie cała przestrzeń przycisku).Ustawiając te właściwości na Stretch, masz ContentPresenter wypełnić dostępną przestrzeń, którą następnie robi Grid, podając prawidłowe zachowanie.

Answer 2

W przycisku ustaw wyrównanie zawartości poziomej i pionowej na Rozciągnięcie. Spowoduje to rozciągnięcie siatki zawartości.

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