如何在另一个具有更大尺寸的控件中显示列表框所选项目(图像)

时间:2013-07-27 12:05:15

标签: wpf image listbox selecteditem

我想在任何其他控件中显示列表框所选项目(图像),但尺寸较大

我尝试使用两个列表框,并设置 IsSynchronizedWithCurrentItem="True" ,但它无效,请找到以下代码。

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen" 
    WindowState="Maximized">

    <Window.Resources>
        <XmlDataProvider x:Key="myXmlDataBase" XPath="/myXmlData">
            <x:XData>
                <myXmlData xmlns="">
                    <Item Name = "CoverSheet" SNo="1"  Type="GrpBX" Image="C:\Work\00288511851128436163\N12201_0003_003\00000003.tif"/>
                    <Item Name = "HCFA" SNo="2" Type="GrpBX" Image="C:\Work\00288511851128436163\N12201_0003_003\00000004.tif"/>
                    <Item Name = "HCFA" SNo="3" Type="GrpBX" Image="C:\Work\00288511851128436163\N12201_0003_003\00000004.tif"/>
                    <Item Name = "HCFA" SNo="4" Type="GrpBX" Image="C:\Work\00288511851128436163\N12201_0003_003\00000004.tif"/>
                    <Item Name = "HCFA" SNo="5" Type="GrpBX" Image="C:\Work\00288511851128436163\N12201_0003_003\00000004.tif"/>
                    <Item Name = "HCFA" SNo="6" Type="GrpBX" Image="C:\Work\00288511851128436163\N12201_0003_003\00000004.tif"/>
                    <Item Name = "HCFA_CC" SNo="7" Type="GrpBX" Image="C:\Work\00288511851128436163\N12201_0003_003\00000005.tif"/>
                    <Item Name = "FrontPage" SNo="8" Type="GrpBX" Image="C:\Work\00288511851128436163\N12201_0003_003\N12201_0003_003I00.tif"/>
                </myXmlData>
            </x:XData>
        </XmlDataProvider>
    </Window.Resources>


    <DockPanel LastChildFill="True"   DataContext="{Binding Source={StaticResource myXmlDataBase}}">


            <!--ItemsSource="{Binding Source={StaticResource myXmlDataBase},XPath=Item}"-->
            <ListBox Name="lv"  FontSize="12" Background="LightSteelBlue" ItemsSource="{Binding Source={StaticResource myXmlDataBase},XPath=Item}"      
            ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionMode="Single"    
            DataContext="{Binding}" IsSynchronizedWithCurrentItem="True" DockPanel.Dock="Top" SelectedIndex="0" >

                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Style.Resources>
                            <!-- Background of selected item when focussed -->
                            <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="#FFD9F4FF" Offset="0"/>
                                <GradientStop Color="#FF9BDDFB" Offset="1"/>

                            </LinearGradientBrush>
                            <!-- Background of selected item when not focussed -->
                            <LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="#FFEEEDED" Offset="0"/>
                                <GradientStop Color="#FFDDDDDD" Offset="1"/>
                            </LinearGradientBrush>
                        </Style.Resources>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel  Orientation="Horizontal" HorizontalAlignment="Stretch" Background="White" Width="Auto" Height="Auto" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <!--Source="{Binding XPath=@Image}"-->
                    <DataTemplate>
                        <Viewbox Stretch="None"  HorizontalAlignment="Stretch" >
                            <Border BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding}" BorderBrush="IndianRed"   Margin="0" Height="Auto">
                                <DockPanel>
                                    <Image 
                                    DockPanel.Dock="Top" Width="150" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto"  
                                    x:Name="Myimage" RenderOptions.BitmapScalingMode="HighQuality"  Source="{Binding XPath=@Image}">
                                    </Image>
                                    <Grid>
                                        <TextBlock Text="{Binding XPath=@SNo}" HorizontalAlignment="Center" FontWeight="Normal"   FontSize="13"  />
                                    </Grid>
                                </DockPanel>
                            </Border>
                        </Viewbox>
                    </DataTemplate>

                </ListBox.ItemTemplate>
            </ListBox>

        <ListBox Name="lv1"  FontSize="12" Background="LightSteelBlue" DataContext="{Binding ElementName=lv, Path=SelectedItems}" ItemsSource="{Binding}"     
            ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionMode="Single" KeyUp="lv1_keyup"  >

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <DockPanel   LastChildFill="True" HorizontalAlignment="Stretch" Background="LightSteelBlue"  Width="Auto" Height="Auto" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>
                               <DataTemplate>
                    <Viewbox Stretch="None"  HorizontalAlignment="Stretch"  >
                               <Image 
                                    Width="150" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto"  
                                    x:Name="Myimage" RenderOptions.BitmapScalingMode="HighQuality" Source="{Binding}" >
                                </Image>
                    </Viewbox>
                </DataTemplate>

            </ListBox.ItemTemplate>
        </ListBox>


    </DockPanel>
</Window>

我尝试过** XmlDataProvider**,但在实际情况下,我会通过收集获得图像。 sholud我处理相同的解决方案,即使从集合

获取图像

2 个答案:

答案 0 :(得分:1)

您需要将ListBox SelectedItem绑定到您希望以更大的尺寸显示SelectedItem的容器的内容。

以下是您尝试做的一个小例子。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <!-- Image ListBox -->
    <ListBox Name="imageListBox" Grid.Column="0"                    
             ItemsSource="{Binding Source={StaticResource myXmlDataBase}, XPath=Item}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <Image Width="150" Margin="5" x:Name="Myimage" Source="{Binding XPath=@Image}"></Image>
                    <TextBlock Text="{Binding XPath=@SNo}" HorizontalAlignment="Center" FontWeight="Normal" FontSize="13" />
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <!-- Selected Image -->
    <ContentPresenter Grid.Column="1"
                      Content="{Binding ElementName=imageListBox, Path=SelectedItem}">
        <ContentPresenter.ContentTemplate>
            <DataTemplate>
                <Image Source="{Binding XPath=@Image}"></Image>
            </DataTemplate>
        </ContentPresenter.ContentTemplate>
    </ContentPresenter>

</Grid>

答案 1 :(得分:0)

在您的代码中为列表框添加选择更改事件处理程序:

      lv.SelectionChanged += lv_SelectionChanged;


private void lv_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
                  //Get selected item and do what you want with it here.
    }

EDITS,想要在XAML中只能使用CollectionViewSource

<Window.Resources>
<CollectionViewSource x:Key="myViewSource" d:DesignSource="{d:DesignInstance {x:Type YOUR_DATA_TYPE}, CreateList=True}"/>
        <CollectionViewSource x:Key="myPath_ViewSource" Source="{Binding Image, Source={StaticResource myViewSource}}"/>
</Window.Resources>

然后

<Grid DataContext="{StaticResource myViewSource}">
 //SOME LIST BOUND TO MAIN CONTEXT
</Grid>

 // LIST BOUND TO SELECTED PATH
<ListView 
        ItemsSource= "{Binding Source={StaticResource myPath_ViewSource} }" ...

当然,您需要在代码中获取myViewSource并填充数据

快速完成后,你需要自己修改并改进它,

相关问题