WPF圖像不會對準

我有一個列表框與此格式WPF圖像不會對準

<ListBox x:Name="lbAlbumSelect" 
          ScrollViewer.VerticalScrollBarVisibility="Auto" 
          ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 

        <ListBox.ItemContainerStyle> 
         <Style TargetType="ListBoxItem"> 
          <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         </Style> 
        </ListBox.ItemContainerStyle> 

        <ListBox.ItemTemplate> 
          <DataTemplate> 
         <Button Click="lbAlbumSelect_OnSelectionChanged"> 
            <Button.Content> 
            <Grid> 
             <Grid.ColumnDefinitions> 
               <ColumnDefinition Width="*" /> 
               <ColumnDefinition Width="2*" /> 
              </Grid.ColumnDefinitions> 
              <Image Grid.Column="0" 
                   Source="{Binding album_img_src}" 
                   HorizontalAlignment="Left"/> 
                 <TextBlock Grid.Column="1" 
                    TextWrapping="Wrap" 
                    TextAlignment="Right" 
                    HorizontalAlignment="Right" 
                    Margin="2,0,0,0" 
                    Text="{Binding album_name}" /> 
            </Grid> 
            </Button.Content> 
        </Button> 

          </DataTemplate> 
         </ListBox.ItemTemplate> 
        </ListBox>

，它顯示了這樣的

Uncorrect display

數據，但我想說明這樣

數據

Correct display

沒有HorizontalContentAlignment設置爲Stretch，ListBoxItem s不會佔用父控件的所有寬度，所以我無法刪除它。但爲什麼Horizontal Alignment=Left在Image不起作用？它被覆蓋或什麼？

來源

2015-04-05 Riccardo Lomazzi

嘗試將按鈕上的水平內容對齊設置爲左側。 – Kavish 2015-04-05 16:14:06

只是一個筆記。在觸發SelectedChanged處理程序的ListBox的ItemTemplate中有一個Button是沒有意義的。改爲附加ListBox的SelectedChanged事件處理程序。然後放下Button並使用Grid作爲DataTemplate的頂層元素。 – Clemens 2015-04-05 16:21:21

@Kavish解決方案，非常感謝。克萊門斯會盡快嘗試，謝謝 – 2015-04-05 16:28:44

您不需要ItemTemplate中的Button來觸發SelectionChanged事件。附加的處理程序列表框的SelectedChanged事件，而不是：

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
     SelectionChanged="lbAlbumSelect_SelectionChanged"> 
    <ListBox.ItemContainerStyle> 
     <Style TargetType="ListBoxItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     </Style> 
    </ListBox.ItemContainerStyle> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="2*"/> 
       </Grid.ColumnDefinitions> 
       <Image Source="{Binding album_img_src}"/> 
       <TextBlock Grid.Column="1" TextAlignment="Center" 
          Text="{Binding album_name}"/> 
      </Grid> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>

事件處理方法得到了SelectionChangedEventArgs參數，它可以被用來確定以何種方式選擇發生了變化：

private void lbAlbumSelect_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 

}

另請注意，在.NET世界中有一個被廣泛接受的命名約定，您可以在其中使用CamelCase作爲屬性名稱。所以你的視圖模型屬性應該是AlbumName和AlbumImgSrc（或更好的AlbumImageSource）。

來源

2015-04-05 16:33:24 Clemens

謝謝，我通過添加SelectionChanged處理程序並刪除按鈕（不再有對齊問題！）來糾正代碼。另外，感謝CamelCase的建議 – 2015-04-05 19:48:11

沒錯。 DataTemplate內部從不設置事件處理程序，因爲它可能無法正常工作。我已經檢查過你的代碼，如果你想達到想要的結果，你需要指定圖像的寬度和高度。試試這個，我重構代碼

<ListBox x:Name="lbAlbumSelect" 
     ScrollViewer.VerticalScrollBarVisibility="Auto" 
     ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
     <ListBox.ItemContainerStyle> 
      <Style TargetType="ListBoxItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
      </Style> 
     </ListBox.ItemContainerStyle> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Border Margin="2"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="200" /> 
          <ColumnDefinition Width="*" /> 
         </Grid.ColumnDefinitions> 
         <Image Source="{Binding album_img_src}" 
           Margin="4" 
           Height="75" 
           Width="75"/> 
         <TextBlock Grid.Column="1" 
           TextWrapping="Wrap" 
           Margin="4" 
           Text="{Binding album_name}" 
            TextAlignment="Justify"/> 
        </Grid> 
       </Border> 

      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox>

讓我知道如果我正確地回答了你的問題。

來源

2015-04-05 17:29:45 masterpiece

WPF圖像不會對準

回答

相關問題