在列表框项目wpf周围显示边框时图像移位

时间:2016-01-16 23:33:54

标签: c# wpf image listbox border

我正在使用列表框来显示图像。选择列表框项目时,它会在图像周围显示边框。它不是在图像周围显示边框,而是将图像向右移动。

列表框样式:

<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>

2 个答案:

答案 0 :(得分:0)

这是因为在您的List<TheObjectToInstantiate> myObjects = mapper.readValue(new File("G:\\myobjectlist.json"), new TypeReference<List<TheObjectToInstantiate>>(){}); [{ "Name" : "foo1", "Surname" : "bar1" }, { "Name" : "foo2", "Surname" : "bar2" }] 样式中,您正在将边框的厚度从正常情况下的ListBoxItem更改为0,当项目为选择。这将内容移动了12pt。

这里有几种可能的解决方案,这里有两种可能:

  • 始终使用12pt边框,但在未选择状态下使用12Transparent画笔
  • {x:Null}上使用12保证金,并在触发器中将其设置为ContentPresenter

答案 1 :(得分:0)

使用布局转换而不是使用渲染转换。  设置保证金=“ - 2,0,-2,0”  对于列表框,填充=“ - 1,0,-1,0”。 和