3

これはちょっと難しい問題だと思います。

いくつかの画像を表示する必要がある ListBox があり、各画像は長方形または正方形の境界線内に配置する必要があります。これは簡単なことです。実際には、このリストボックスは、画面解像度またはウィンドウ サイズに関係なく、常に 1 行あたり 3 つの要素を表示する必要があります。

それを取得するために、リストボックスを次のようにテンプレート化しました。

<ListBox Grid.Column="2" Grid.Row="1" x:Name="_productsLB" SelectedIndex="0"
             ItemsSource="{Binding Products}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
             HorizontalContentAlignment="Stretch">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="3" Rows="4"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8"
                    Width="Auto" Height="Auto" HorizontalAlignment="Stretch">
                    <Image Source="{Binding ImagePath}" Stretch="Uniform"/>                        
                </Border>                    
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

問題は、リストボックス項目の「周囲」の正方形の境界線ではなく、画像の周囲に長方形の境界線を取得することです。

均一なグリッド列幅に依存する必要があるため、幅プロパティを指定できないことに注意してください。

何かヒントはありますか？

どうもありがとう！

4

2 に答える 2

8

境界線から Margin を削除して Image に設定すると、ListviewItem とまったく同じ大きさの境界線が Image の周囲に作成されます。写真を参照してください。

それが期待したものでない場合は、より明確に定義してください。

  <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8"
          Width="Auto" Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}" 
          HorizontalAlignment="Stretch">
    <Image Source="{Binding ImagePath}" Stretch="Uniform"/>

編集：

VerticalContentAlignment="Stretch"ListBox に追加すると、画像のサイズが適切に変更されます。下の図を参照してください。

編集II：

画像を正方形として表示する場合は、Border の Height を現在の Width に設定する必要があります。

Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}"

画像の枠線

于 2012-01-11T11:04:48.757 に答える
1

これを試して

<ListBox Grid.Column="2" Grid.Row="1" x:Name="_productsLB" SelectedIndex="0" 
         ItemsSource="{Binding Products}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
         HorizontalContentAlignment="Stretch"> 
    <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
            <UniformGrid Columns="3" Rows="4"/> 
        </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
        <DataTemplate> 
            <Grid>
            <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8" 
                Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}}" Height="="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}}" > 
                <Image Source="{Binding ImagePath}" Stretch="Uniform" />                         
            </Border>
            </Grid>                    
        </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>
于 2012-01-11T12:20:11.200 に答える