0

すべてのコメント ボックスが適切に右揃えになるように、コメント セクションのスペースを確保しながら、中央の列を利用可能な全幅にするにはどうすればよいですか。

ここに画像の説明を入力

    <DataTemplate x:Key="ActivityStreamItemTemplate">
        <StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
            <Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
                <Grid Height="auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67" />
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="60" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Height="auto" Grid.Column="0" Background="Transparent">
                        <Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
                            <Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
                        </Border>
                    </StackPanel>
                    <StackPanel Height="auto" Grid.Column="1">
                        <TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
                        <TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap"/>
                        <TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
                    </StackPanel>
                    <StackPanel Height="60" Grid.Column="2" Margin="10,0,0,0">
                        <StackPanel.Background>
                            <ImageBrush Stretch="Fill" ImageSource="/Assets/Icons/CommentsIcon.png"/>
                        </StackPanel.Background>
                        <TextBlock Text="{Binding comments.Count}" HorizontalAlignment="Center" FontSize="20" Foreground="Black" TextAlignment="Center" Padding="0,8,0,0"/>
                    </StackPanel>
                </Grid>
            </Button>
        </StackPanel>
    </DataTemplate>

3 番目のスタックパネルに水平方向の配置を配置しようとしましたが、実際には機能しませんでした。

編集：試してくれてありがとう、葉巻はありません：

ここに画像の説明を入力

4

6 に答える 6

2

ListBoxItemコンテンツが使用可能な幅全体に引き伸ばされるように、 自体のスタイルを変更する必要があります。

このスタイルを定義します:

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>

次に、「コメント」画像の右揃えが機能し、中央のテキスト ボックスが伸びて利用可能なスペースを埋めます。

特に列 0 と 2 のデータが一定の幅である場合は、アイテム テンプレートに対してを使用するStackPanelよりも、水平方向で を使用する方がうまく機能することに気付くかもしれません。Grid

于 2013-10-21T08:19:53.497 に答える
0

列に指定されたスペースをいじってみましょう。次に例を示します。

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="67" />
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>

これにより、中央の列に右の列の 3 倍のスペースができます

于 2013-10-19T16:36:06.933 に答える
0

あなたの問題はボタンです。必須ではない場合は、削除して「タップ」イベントをStackPanelに追加してみてください。試してみましたが、動作します。

<DataTemplate x:Key="ActivityStreamItemTemplate">

    <StackPanel Tap="...">
        // no <Button> here
            <Grid>
                ---
            </Grid>
        // no </Button> here
    </StackPanel>

</DataTemplate>

より良いオプション

<DataTemplate x:Key="ActivityStreamItemTemplate">

    <Grid Tap="...">
        ...
    </Grid>

</DataTemplate>
于 2013-10-24T09:53:13.747 に答える
0

Inside a StackPanel you can't do HorizontalAlignment to right while its orientation is LeftToRight, as far as I know. Avoid using it.

于 2013-10-21T09:01:37.337 に答える