画布中的画布和文本的对齐方式

时间:2017-12-29 19:12:53

标签: canvas uwp uwp-xaml

所以,我尝试将文字放在画布中心,但我无法弄清楚我现在在做什么是这样的:

<Canvas Background="#730D11" Width="138" Height="138" HorizontalAlignment="Right" VerticalAlignment="Center">
                        <TextBlock Text="S6" Foreground="#EAEAEA" FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center" Canvas.Left="45" Canvas.Top="34" />
                    </Canvas>

这为S6完成了事情,但是如果我将其设置为S66,那么它只会添加6并保持位置...我想将文本保留在帆布一直居中。

另外,那个canvast是StackPanel并且我希望它位于该堆栈面板的右侧,但是它没有去那里,我该如何解决这个问题?这是我目前使用的代码:

<Page
    x:Class="Rittensport_Software.CalculatePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Rittensport_Software"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#E6E6E6">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="7*"></RowDefinition>
        </Grid.RowDefinitions>

        <!--Navigation bar-->
        <Canvas Grid.Row="0" Background="#073D48" Opacity="0.8"></Canvas>
        <!--Navigation-->
        <StackPanel Orientation="Horizontal">
            <Image x:Name="mgBackBtn" Source="Assets/Icons/Back.png" Width="96" Height="96" />
            <TextBlock Text="REKENBLAD" Foreground="#F8F8F8" FontSize="35" VerticalAlignment="Center" />
            <TextBlock Text="(Deel 2)" Foreground="#F8F8F8" FontSize="35" VerticalAlignment="Center" Margin="30,0" />
        </StackPanel>

        <!--There we will put the main shit in (also a grid because it is difficult) -->
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>

            <!--Top items-->
            <Grid Grid.Row="0">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>

                <StackPanel Grid.Row="0" Orientation="Horizontal">
                    <StackPanel Orientation="Horizontal" Margin="140,41,0,0" VerticalAlignment="Top">
                        <TextBlock Text="Klasse" FontFamily="Verdana" FontSize="35" />
                        <ComboBox x:Name="ClassSelector" VerticalAlignment="Center" Margin="26,0"/>

                        <TextBlock Text="Nummer" FontFamily="Verdana" FontSize="35" />
                        <ComboBox x:Name="StartNumbers" VerticalAlignment="Center" Margin="26,0"/>

                        <TextBlock Text="Deel" FontFamily="Verdana" FontSize="35" />
                        <ComboBox x:Name="InputSegment" VerticalAlignment="Center" Margin="26,0"/>
                    </StackPanel>
                    <!--The current numer selected-->
                    <Canvas Background="#730D11" Width="138" Height="138" HorizontalAlignment="Right" VerticalAlignment="Center">
                        <TextBlock Text="S6" Foreground="#EAEAEA" FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center" Canvas.Left="45" Canvas.Top="34" />
                    </Canvas>
                </StackPanel>


                <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="140,0">
                    <TextBlock Text="Piloot:" FontWeight="Bold" FontSize="35" />
                    <TextBlock Text="NAAM Voornaam" FontSize="35" Margin="10,0" />
                    <TextBlock Text="(tel)" FontSize="25" Margin="5,9" />

                    <TextBlock Text="Navigator:" FontWeight="Bold" FontSize="35" Margin="306,0,0,0" />
                    <TextBlock Text="NAAM Voornaam" FontSize="35" Margin="10,0" />
                    <TextBlock Text="(tel)" FontSize="25" Margin="5,9" />
                </StackPanel>

            </Grid>

            <Grid Grid.Row="1">
                <Border BorderBrush="#707070" BorderThickness="0 1 0 0" Margin="70.5,0" />
                <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,60,0,0">
                    <TextBlock Text="Gemiste controles" Height="42" VerticalAlignment="Center" Foreground="#0F0F0F" FontSize="35" Margin="140,0,0,0" />
                    <TextBox PlaceholderText="100" Height="42" VerticalAlignment="Center" />
                </StackPanel>



 </Grid>

        <Grid Grid.Row="2">
            <Border BorderBrush="#707070" BorderThickness="0 1 0 0" Margin="70.5,0" />
        </Grid>

    </Grid>

</Grid>

我想要达到的结果如下:

result

但它适用于所有屏幕而不是静态...

1 个答案:

答案 0 :(得分:0)

  

我希望画布中的文字始终居中

Canvas用于使用Canvas.LeftCanvas.Top属性对子元素进行绝对定位。其子项的HorizontalAlignmentVerticalAlignment属性值对布局没有影响。要将文字放在中心,请使用Grid代替Canvas

<Grid Background="#730D11" Width="138" Height="138">
    <TextBlock Text="S6" Foreground="#EAEAEA" FontSize="50" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
</Grid>
  

这个canvast是在StackPanel中,我希望它位于该堆栈面板的右侧,但它并没有去那里

StackPanel的大小只会增加到适合所有子元素所需的数量。由于其中没有空白空间,如果孩子的HorizontalAlignment属性设置为LeftRight,则不会有任何区别。要将内容与正确对齐,请使用GridRelativePanel