9

我有一个 WPF 列表框,并已将列表项数据模板更新为基本上具有 3 列布局。

我想:

|状态颜色|名称| 按钮|

这些可能是 CSS 术语,但我想将状态颜色和名称浮动到左侧,我已经完成了,然后我希望按钮浮动到右侧,并且即使窗口变宽也始终保持在右侧.

我觉得我很接近,当窗口变宽时,列表项的宽度会增加,我觉得我所要做的就是告诉按钮向右浮动,但不知道如何。我试过堆栈面板,一个带有自动|*|自动列布局的网格(最后一列有一个拉伸),我试过一个停靠面板。

这是我的 XAML:

    <Controls:MetroWindow x:Class="Appsecute.Views.MainView2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:AppsecuteControls="clr-namespace:Appsecute.Controls"
        Title="APPSECUTE" Height="630" Width="480" Icon="/Appsecute;component/Images/icon.png" WindowStartupLocation="CenterScreen">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid Margin="0,0,12,0">
        <AppsecuteControls:NotifyIcon
            x:Name="NotifyIcon"
            Text="Appsecute"
            Icon="/Images/icon.ico" MouseDoubleClick="NotifyIconMouseDoubleClick" Grid.ColumnSpan="2">
            <AppsecuteControls:NotifyIcon.ContextMenu>
                <ContextMenu StaysOpen="False">
                </ContextMenu>
            </AppsecuteControls:NotifyIcon.ContextMenu>
        </AppsecuteControls:NotifyIcon>

        <Grid Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Margin="12,0,0,24">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Label Content="APPLICATIONS" Height="auto" Name="LabelApplications" Grid.Row="0" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
            <ListBox Height="auto" Name="ListBoxApplications" Width="auto" Grid.Row="1" Grid.ColumnSpan="3" Focusable="False" Background="White" BorderBrush="{x:Null}" SelectionChanged="ListBoxApplicationsSelectionChanged">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                        <Setter Property="Padding" Value="0"></Setter>
                        <Setter Property="Background" Value="#EEEEEE"></Setter>
                        <Setter Property="BorderBrush" Value="White"></Setter>
                        <Setter Property="BorderThickness" Value="0,0,0,2"></Setter>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" Value="#FF4EA6EA"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <StackPanel Grid.Column="0" Orientation="Horizontal">
                                <Rectangle Fill="{Binding StateColor}" Width="5" Height="auto" Margin="0,0,5,0"></Rectangle>
                                <StackPanel Orientation="Vertical">
                                    <StackPanel Orientation="Horizontal" Margin="0,4,0,0">
                                        <TextBlock Text="{Binding DisplayName}" FontSize="20" Padding="2" />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal" Margin="0,4">
                                        <TextBlock Text="{Binding CloudName}" FontSize="12" Foreground="#FF666666" />
                                        <TextBlock Text=" - " FontSize="12" Foreground="#FF666666" />
                                        <TextBlock Text="{Binding Username}" FontSize="12" Foreground="#FF666666" />
                                    </StackPanel>
                                </StackPanel>
                            </StackPanel>

                            <DockPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">
                                <Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonUpload" ToolTip="Upload Application" Click="ButtonUploadClick">
                                    <StackPanel>
                                        <Image Width="24" Height="24" Source="/Appsecute;component/Images/upload.png"/>
                                    </StackPanel>
                                </Button>
                                <Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStart" Click="ButtonStartClick" ToolTip="Start Application" IsEnabled="{Binding IsStopped}">
                                    <StackPanel>
                                        <Image Width="24" Height="24" Source="/Appsecute;component/Images/play.png" />
                                    </StackPanel>
                                </Button>
                                <Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStop" ToolTip="Stop Application" Click="ButtonStopClick" IsEnabled="{Binding IsStarted}">
                                    <StackPanel>
                                        <Image Width="24" Height="24" Source="/Appsecute;component/Images/stop.png"/>
                                    </StackPanel>
                                </Button>
                                <Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Click="ButtonRestartClick" Tag="{Binding}" Name="ButtonRestart" ToolTip="Restart Application">
                                    <StackPanel>
                                        <Image Width="24" Height="24" Source="/Appsecute;component/Images/restart.png"/>
                                    </StackPanel>
                                </Button>
                            </DockPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Label Content="SERVICE INSTANCES" Height="auto" Name="LabelServiceInstances" Grid.Row="2" Grid.ColumnSpan="3" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
            <ListBox Height="auto" Name="ListBoxServiceInstances" Width="auto" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="3" />
        </Grid>
        <Label Height="28" HorizontalAlignment="Left" Margin="0,0,0,0" Name="LabelStatus" VerticalAlignment="Bottom" Width="auto" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Stretch" FontSize="10" />
    </Grid>
</Controls:MetroWindow>

还有我想要实现的图像:

在此处输入图像描述

4

2 回答 2

8

问题出在下面的第一级DataTemplate,这里:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">

从本质上讲, aStackPanel会将项目向左对齐,因此它不是一个非常适合您想要做的布局。而是尝试使用具有两列的Grid,给出 left columnWidth=*和 right Width=Auto

<ListBox HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Vertical">
                    ...
                </StackPanel>
                <DockPanel Grid.Column="1" VerticalAlignment="Center">
                    ...
                </DockPanel>
            </Grid>
        <DataTemplate>
    </ListBox.ItemTemplate>
<ListBox>
于 2012-06-23T03:02:53.660 回答
1

在您的ItemContainerStyle中,将 设置HorizontalAlignmentStretch。我相信默认情况下它是 Left,这可能会导致 Grid 或 StackPanel 或您使用的任何容器崩溃。

于 2012-06-23T03:32:01.227 回答