Skip to content

Image Resource Viewer #1091

@avalanchus

Description

@avalanchus

I made a small image collection viewer for Fluent.Ribbon.Showcase that looks something like this:

image

This would make it easier to pick up any image and fill the collection.
Can you include this in your project if you find it useful?

Fluent.Ribbon.Showcase/IconViewer.xaml

<UserControl x:Class="FluentTest.IconViewer"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:FluentTest"
             xmlns:fluentTest="clr-namespace:FluentTest"
             xmlns:fluent="urn:fluent-ribbon"
             mc:Ignorable="d" 
             d:DesignHeight="500" d:DesignWidth="300">
    <UserControl.DataContext>
        <fluentTest:DesignTimeData />
    </UserControl.DataContext>
    <Grid>
        <ListView x:Name="TvBox" ItemsSource="{Binding Data}"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <fluent:Button 
                        Icon ="{Binding Value}" 
                        Header="{Binding Key}"
                        SizeDefinition="Middle"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</UserControl>

Fluent.Ribbon.Showcase\IconViewer.xaml.cs

namespace FluentTest;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using System.Windows.Media;

/// <summary>
///     Browse the design time collection of icons in the Resource Dictionary
/// </summary>
public partial class IconViewer
{
    public IconViewer()
    {
    }
}

public class DesignTimeData
{
    public ObservableCollection<KeyValuePair<string, DrawingImage>> Data { get; set; }

    public DesignTimeData()
    {
        ResourceDictionary dictionary = new ResourceDictionary
        {
            Source = new Uri("pack://application:,,,/Fluent;component/Themes/Images.xaml", UriKind.Absolute)
        };

        var keys = dictionary.Keys.Cast<string>().Select(key => key?.Substring(key.LastIndexOf('.') + 1)).ToArray();
        var images = dictionary.Values.Cast<DrawingImage>().ToArray();

        this.Data = new ObservableCollection<KeyValuePair<string, DrawingImage>>();

        for (var i = 0; i < dictionary.Count; i++)
        {
            this.Data.Add(new KeyValuePair<string, DrawingImage>(keys[i], images[i]));
        }
    }
}

Fluent.Ribbon\Themes\Generic.xaml - here we need to add Images.xaml for using Uri in the code above

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/Fluent;component/Themes/Styles.xaml" />
        <ResourceDictionary Source="pack://application:,,,/Fluent;component/Themes/Images.xaml" />
        <ResourceDictionary Source="pack://application:,,,/Fluent;component/Themes/Themes/Light.Blue.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions