Question

我需要一些帮助才能在我的WPF应用中实现所需的布局。我目前的XAML列在这里：

<TabItem Header="Third Party Updates">
            <Grid>
                <TextBlock Name="ThirdPartyNoManifestTextBox" Width="Auto" HorizontalAlignment="Left" Margin="267,22,0,0" TextWrapping="Wrap" Text="{Binding Path=WindowsUpdateCompliance, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" FontSize="14" Foreground="DarkSlateBlue"/>
                <Button Name="CheckforThirdPartyUpdatesButton" Content="Check for Third Party Updates" Margin="10,11,339,304" Click="CheckforThirdPartyUpdatesButton_Click" MaxWidth="200" Grid.Column="1" Grid.Row="1"/>
                <ListBox Name="ThirdPartyListBox" ItemsSource="{Binding}" Margin="0,70,0,0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>                              
                            <StackPanel Orientation="Horizontal">
                                        <Button Name="ThirdPartyInstallButton" Content="Install" Click="InstallThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
                                        <Button Name="ThirdPartyPostoneButton" Content="Postpone" Click ="PostponeThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
                                    <TextBlock Name="MissingRequiredAppGenericTextBlock" Text="Required application update detected:" Margin="12,25,0,0"/>
                                    <TextBlock Name="RequiredAppNameTextBlock" FontWeight="Bold" Text="{Binding Item2.Name}" Margin="12,25,0,0"/>
                                    <TextBlock Name="RequiredAppVersionTextBlock" FontWeight="Bold" Text="{Binding Item2.RequiredVersion}" Margin="3,25,0,0"/>
                                        <TextBlock Name="RequiredAppCustomUIMessageTextBlock" Text="{Binding Item2.CustomUIMessage}" Margin="10,25,0,0" TextWrapping="Wrap" Foreground="Red"/>
                                        <TextBlock Margin="3,25,0,0">           
                                        <Hyperlink Name="Link" NavigateUri="{Binding Item2.TT}" RequestNavigate="Hyperlink_RequestNavigate">
                                             <TextBlock Text="{Binding Item2.TT}"/>
                                        </Hyperlink>
                                    </TextBlock>
                                    <TextBlock Text="You have used " Margin="3,25,0,0"/>
                                    <TextBlock Text="{Binding Item3.UsedDeferrals}" Margin="3,25,0,0"/>
                                    <TextBlock Text=" of " Margin="3,25,0,0"/>
                                    <TextBlock Text="{Binding Item2.MaxDefferals}" Margin="3,25,0,0"/>
                                    <TextBlock Text=" deferrals for this update." Margin="3,25,0,0"/>

                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </TabItem>

该代码产生以下结果：

enter image description here

目前，每个列表框项目（可视化为离散行）包含两个按钮，以及许多绑定属性（应用程序名称，版本，超链接，自定义消息等）。我想要实现的是一个布局，其中每个列表框项目仍然是它自己的行，但是分成两列：列0将保持每行（Install和Postpone）水平堆叠的两个共同的按钮。第1列将保持与该列垂直堆叠的其余控件（可视化为一种子弹列表）。这是我想要为每一行实现的外观的近似值：

                                       * Required Update detected: App 1.2
|INSTALL_BUTTON| |POSTPONE_BUTTON|     * "Please install this update immediately"
                                       * https://App1_2.com/download
                                       * You have used 1 of 2 deferrals for this update.

如何开始使用这样的布局的任何提示将非常感激。到目前为止我尝试过的所有东西都没有成功。

Answer 1

尝试使用网格和更多堆栈面板修改XAML，如下所示：

<StackPanel Orientation="Horizontal">
    <Button Name="ThirdPartyInstallButton" Content="Install" Click="InstallThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
    <Button Name="ThirdPartyPostoneButton" Content="Postpone" Click ="PostponeThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Label Content="*" />
        <Label Content="*" Grid.Row="1" />
        <Label Content="*" Grid.Row="2" />
        <Label Content="*" Grid.Row="3" />
        <StackPanel Orientation="Horizontal" Grid.Column="1">
            <Label Name="MissingRequiredAppGenericTextBlock" Content="Required application update detected:" />
            <Label Name="RequiredAppNameTextBlock" FontWeight="Bold" Content="{Binding Item2.Name}" />
            <Label Grid.Column="1" Grid.Row="1" Name="RequiredAppVersionTextBlock" FontWeight="Bold" Content="{Binding Item2.RequiredVersion}" />
        </StackPanel>
        <TextBlock Grid.Column="1" Grid.Row="1" Name="RequiredAppCustomUIMessageTextBlock" Text="{Binding Item2.CustomUIMessage}" TextWrapping="Wrap" Foreground="Red"/>
        <TextBlock Grid.Column="1" Grid.Row="2">
            <Hyperlink Name="Link" NavigateUri="{Binding Item2.TT}" RequestNavigate="Hyperlink_RequestNavigate">
                <TextBlock Text="{Binding Item2.TT}"/>
            </Hyperlink>
        </TextBlock>
        <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="3">
            <TextBlock Text="You have used " />
            <TextBlock Text="{Binding Item3.UsedDeferrals}" />
            <TextBlock Text=" of " />
            <TextBlock Text="{Binding Item2.MaxDefferals}" />
            <TextBlock Text=" deferrals for this update." />
        </StackPanel>
    </Grid>
</StackPanel>

我没有任何可以反对的东西，但这是它在我的设计师中呈现的方式：

enter image description here

WPF列和堆栈

1 个答案: