Question

如图所示，我有原始图片，想要添加一些文字。我试过网格，但并不完美。当窗口大小改变或在PC /移动设备上时，我希望它们都在正确的位置。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="7*"/>
        </Grid.RowDefinitions>
        <StackPanel>
            <TextBlock Text="Who are we" Margin="5"/>
            <ComboBox x:Name="comboboxJobs" Margin="5" BorderThickness="1"/>
        </StackPanel>
        <Grid Grid.Row="1" MaxWidth="600" MaxHeight="900">
            <Grid.Background>
                <ImageBrush AlignmentX="Center" AlignmentY="Bottom" Stretch="Uniform" ImageSource="ms-appx:///Assets/WhoAreWe.jpg"/>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>

            <!--<Image Grid.Row="0" Grid.RowSpan="6" Grid.ColumnSpan="2" Source="ms-appx:///Assets/WhoAreWe.jpg" VerticalAlignment="Bottom"/>-->
            <TextBox Grid.Row="0" Grid.Column="0" Text="Who are we？" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="0" Grid.Column="1" Text="Programmers！" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="2" Grid.Column="0" Text="What we do？" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="2" Grid.Column="1" Text="Fix Bugs！" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="4" Grid.Column="0" Text="Then what？" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="4" Grid.Column="1" Text="Write new Bugs！" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
        </Grid>

    </Grid>

Answer 1

从问题来看，VisualStates与Adaptive Triggers的作业似乎相同。

我完成了你的代码，我必须说，理想情况下你的XAML看起来不应该是这样，有更好的方法来实现相同类型的UI，这将有助于保持动态和可扩展性。根据您分享的当前代码段，您似乎很难更改/添加更多字段到您的UI（目前它只有6但是当它变为15时会发生什么，那么你还会添加8行吗？）。

暂且不说，我已经调整了你的代码：

为style使用了常见的textbox，以便明天如果您想要更改文本框样式，则只需执行一次。
使用RelativePanel代替rootGrid，这会减少行和列的定义，从而增加可维护性。
将Row和Column定义修改为Auto *以提供自适应用户界面。
将Image元素放在ViewBox中，以便在窗口大小更改时提供流畅性。
最后添加了visualStates来处理textbox。

更新的代码如下：

<RelativePanel Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveVisualStates">
            <VisualState x:Name="Compressed">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowHeight="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBox.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox1.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox2.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox3.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox4.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox5.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Expanded">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowHeight="800"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBox.Visibility" Value="Visible"/>
                    <Setter Target="textBox1.Visibility" Value="Visible"/>
                    <Setter Target="textBox2.Visibility" Value="Visible"/>
                    <Setter Target="textBox3.Visibility" Value="Visible"/>
                    <Setter Target="textBox4.Visibility" Value="Visible"/>
                    <Setter Target="textBox5.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <TextBlock Name="headerText" Text="Who are we?" FontSize="18" FontWeight="SemiBold" Margin="10,5"/>
    <ComboBox x:Name="comboboxJobs" Margin="10,5" BorderThickness="1" RelativePanel.Below="headerText" MinWidth="200"/>
    <Grid Grid.Row="1" MaxWidth="600" MaxHeight="900" MinHeight="300" RelativePanel.Below="comboboxJobs" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True"  Background="Gray" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="CollapsableA" Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition x:Name="CollapsableB" Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition x:Name="CollapsableC" Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBox x:Name="textBox" Grid.Row="0" Grid.Column="0" Text="Who are we？" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="1" Grid.Column="0" Stretch="UniformToFill">
            <Image Source="Assets/Dummy1.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox1" Grid.Row="0" Grid.Column="1" Text="Programmers！" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill">
            <Image Source="Assets/Dummy2.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox2" Grid.Row="2" Grid.Column="0" Text="What we do？" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="3" Grid.Column="0" Stretch="UniformToFill">
            <Image Source="Assets/Dummy3.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox3" Grid.Row="2" Grid.Column="1" Text="Fix Bugs！" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="3" Grid.Column="1" Stretch="UniformToFill">
            <Image Source="Assets/Dummy4.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox4" Grid.Row="4" Grid.Column="0" Text="Then what？" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="5" Grid.Column="0" Stretch="UniformToFill">
            <Image Source="Assets/Dummy5.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox5" Grid.Row="4" Grid.Column="1" Text="Write new Bugs！" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="5" Grid.Column="1" Stretch="UniformToFill">
            <Image Source="Assets/Dummy6.jpg"/>
        </Viewbox>

    </Grid>
</RelativePanel>

在<Page.Resources>中添加textbox

<Page.Resources>
    <Style x:Key="TextboxStyle" TargetType="TextBox">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>
</Page.Resources>

如何在uwp中编写这样的自适应面板？

1 个答案:

推荐