9

私は WPF リストボックスを持っていて、基本的に 3 列のレイアウトを持つようにリスト アイテム データ テンプレートを更新しました。

をお願いします:

|ステータスカラー|名前| ボタン|

これらはおそらく CSS 用語ですが、ステータスの色と名前を左にフロートさせたいのですが、これを行った後、ボタンを右にフロートさせ、ウィンドウが広くなっても常に右にとどまります。 .

ウィンドウが広くなるとリスト項目の幅が大きくなり、ボタンに右にフロートするように指示するだけでよいのですが、方法がわかりません。スタック パネル、auto|*|auto 列レイアウト (最後の列にストレッチあり) のグリッドを試し、dockpanel を試しました。

ここに私の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">

a はその性質上、StackPanelアイテムを左揃えにするため、やりたいことに適したレイアウトではありません。代わりに、左の列と右の列を指定して、2 つの列を持つGridを使用してみてください。 Width=*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で、 を に設定HorizontalAlignmentしますStretch。デフォルトでは Left であると思います。これにより、Grid や StackPanel、または使用するコンテナーが折りたたまれている可能性があります。

于 2012-06-23T03:32:01.227 に答える