Images next to a ModernTab List View

Sep 3, 2013 at 6:03 PM
Is it possible to have images next to the list items in a ModernTab view? If so could you point me in the right direction?
Sep 5, 2013 at 1:45 PM
I have tried to change ModernTab to inharite from ListBox instead of contorl so I would have access to ItemTemplate but I feel this is the wrong way to approch this because ModernTab is still using Links and LinkCollections. so even if I create an item template it's still just a link. I'm kind of banging my head at the wall so any advice would be wonderful.
Coordinator
Sep 5, 2013 at 5:00 PM
You'll need to create a custom template for the ModernTab for displaying images. Next to that you'll need to add Image source info to the Link class, so you can bind to it. No need to update ModernTab itself.
Sep 5, 2013 at 10:36 PM
Kozw, THANK YOU!

Image

For anyone else that would like to do this code below.

Link Class

private ImageSource imageSource;

...

        /// <summary>
        /// Gets or sets the source image.
        /// </summary>
        /// <value>The source.</value>
        public ImageSource ImageSource
        {
            get { return this.imageSource; }
            set
            {
                if (this.imageSource != value)
                {
                    this.imageSource = value;
                    OnPropertyChanged("ImageSource");
                }
            }
        }

ModernTab.xaml

                                    <!-- link list -->
                                    <ListBox x:Name="LinkList" ItemsSource="{TemplateBinding Links}"
                                             ScrollViewer.HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" >
                                        <ListBox.ItemTemplate>
                                            <DataTemplate>
                                                <StackPanel Orientation="Horizontal">
                                                    <Image Source="{Binding ImageSource}" Width="16" Height="16" />
                                                    <TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" Margin="10,2,2,2" FontSize="{DynamicResource SmallFontSize}" TextTrimming="CharacterEllipsis" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                    </ListBox>

Example.xaml

        <mui:ModernTab Name="lvTest" Layout="List">
            <mui:ModernTab.Links>
                <!-- TODO: set @Source -->
                <mui:Link  DisplayName="Green Link" ImageSource="pack://application:,,,/Images/green.png" />
                <mui:Link  DisplayName="Orange Link" ImageSource="pack://application:,,,/Images/orange.png" />
                <mui:Link  DisplayName="Red Link" ImageSource="pack://application:,,,/Images/red.png" />
            </mui:ModernTab.Links>
        </mui:ModernTab>
Thank you again for a wonderful project!!! Just so easy just didn't know where to start :D
Nov 15, 2013 at 7:00 PM
Hi Kozw,

Where you implement it, directly in ModernTab.xaml in Modern UI source ?

Thank's