CODEWITHSUNDEEP
wpfimagelistboxselecteditem
Selva
Selva

Reputation: 1360

How to show Listbox selected item (Image) in an another Control with larger size

I want to show the listbox selected item (image) in any other control but in larger size

i have tried with two listboxes andalso by setting IsSynchronizedWithCurrentItem="True" but it is not working, please find the code below.

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

i have tried with **XmlDataProvider** ,but in real scenario i will get the image through collection. sholud i handle same solution even when get the images from collection

Upvotes: 0

Views: 2000

Answers (2)

Nitesh
Nitesh

Reputation: 7429

You need to bind your ListBox SelectedItem to the Content of the container where you wish to display your SelectedItem in larger size.

Here is a small example of what you are trying to do.

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

Upvotes: 1

Mark Homer
Mark Homer

Reputation: 1035

In your code add a selection changed event handler for the listbox:

      lv.SelectionChanged += lv_SelectionChanged;


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

EDITS, want do in XAML only can use a 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>

THen 

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

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

Of course you will need to get myViewSource in code behind and populate with data

Done pretty quickly off top of my head you will need to rework and refine it for yourself,

Upvotes: 0

Related Questions