2016-01-16 77 views
0

我正在使用列表框來顯示圖像。當選擇列表框項目時,它會在圖像周圍顯示邊框。不是在圖像周圍顯示邊框,而是將圖像向右移動。在列表框項目周圍顯示邊框時的圖像移動wpf

列表框風格:

<Style TargetType="{x:Type ListBox}"> 
    <Setter Property="ItemTemplate"> 
     <Setter.Value> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <Image Source="{Binding Path=UriSource}" 
         Stretch="Fill" 
         Width="639" Height="530"> 
        </Image> 
       </StackPanel> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="ItemsPanel"> 
     <Setter.Value> 
      <ItemsPanelTemplate> 
       <WrapPanel /> 
      </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" 
      Value="Disabled"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" 
      Value="Disabled"/> 

     <Setter Property="HorizontalContentAlignment" 
      Value="Left"/> 
     <Setter Property="VerticalContentAlignment" 
      Value="Center" /> 
</Style> 

列表框項目風格:

<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle"> 
    <Setter Property="Padding" Value="0,0,0,0"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ListBoxItem}"> 
        <Border x:Name="Bd" 
         SnapsToDevicePixels="True" 
         Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="0" 
         Padding="{TemplateBinding Padding}"> 
       <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsSelected" Value="true"> 
          <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/> 
          <Setter Property="BorderThickness" TargetName="Bd" Value="12" /> 
          <Setter Property="Width" Value="639" /> 
          <Setter Property="Height" Value="530" /> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="Selector.IsSelectionActive" Value="false"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/> 
          <Setter Property="BorderThickness" TargetName="Bd" Value="12" /> 
          <Setter Property="Width" Value="639" /> 
          <Setter Property="Height" Value="530" /> 
         </MultiTrigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

回答

0

這是因爲你的ListBoxItem風格,你在正常情況下改變邊框的厚度,從0,到當選擇該項目時爲12。這將內容移動了12pt。

您有幾種可能的解決方案在這裏,這裏有兩種可能性:

  • 一定要使用12磅的邊界,但在未選中狀態使用Transparent{x:Null}
  • 使用12保證金您ContentPresenter ,並將其設置爲0中的觸發器
+0

當我添加一個透明邊框或邊距時,會在邊上的圖像中引入間距。我總是希望圖像的總寬度爲1280,高度爲530。我只在1280 * 720屏幕上顯示2張圖像。 – Atul

0

使用佈局變換而不是使用Render變換。 Set Margin =「 - 2,0,-2,0」 Padding =「 - 1,0,-1,0」爲列表框。 和

相關問題