Kekrit, Lohjansaari

  Pääsivulle  |  TIETOTEKNIIKAN PÄÄSIVULLE

Kuvamatriisi (WPF)

kuvajoukko on usein kätevä esittää kuvamatriisissa, joka elää odotetulla tavalla, kun ikkunan kokoa muuttaa. Tässä esimerkissä ListBox-joukko on sijoitettu WrapPaneliin, jossa kuvat etenevät vaakasuorassa. Scrolli on vain oikeassa reunassa.

Ensin on ikkunan kuvaus xaml-tiedostona ja sen jälkeen C#-koodi, joka tulee omaksi tiedostokseen. Sovelluksen testaamiseksi sijoita 16 kuvaa sopivaan kansioon, jonka määrittelet sovelluksessa. Nyt siellä on oma testikansioni

<!--- 4.2.2018  MainWindow.xaml-->
<Window x:Class="Kuvamatr_testi3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Kuvamatr_testi3"
    mc:Ignorable="d"
    Title="Kuvamatriisin testaus 3" Height="540" Width="780">
<Window.Resources>
    <!--Define the context menu-->
    <ContextMenu x:Key="kuvanMenu">
        <MenuItem Header="Kohteen tiedot" Click="MenuItemTiedot_Click"/>
        <MenuItem Header="Näytä iso kuva" Click="MenuItemKuva_Click"/>
        <MenuItem Header="Kopioi kuva työpöydälle" Click="MenuItemKopioi_Click"/>
    </ContextMenu>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="*" />
       <!--- Tässä toimii tähti oikein, jos jäljempänä on ListBox DockPanelin sisässä -->
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="2"
            Height="24" VerticalAlignment="Top" >
        <Label Content=" Kuvat: "  FontWeight="Bold" />
        <Label Name="txtKuvanrot" Content=" "  />
        <Label  Content="  Kuvamatriisi ListBoxissa"  />
        <Button FontWeight="Bold" Content="  Sulje  " Margin="30,0,0,0"
                    PreviewMouseLeftButtonUp="ButtonSulje_Click"/>
        <Button FontWeight="Bold" Content="  Kuvan tiedot  " Margin="30,0,0,0"
                    PreviewMouseLeftButtonUp="ButtonTiedot_Click"/>
        <Label Content="  Kuvilla context menu, testaa myös doubleclick"  />
    </StackPanel>
    <!--- DockPanel ei välttämätön, ks kommentti edellä -->
    <DockPanel Grid.Row="1"> 
        <ListBox x:Name="kuvamatr"  ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                    ScrollViewer.VerticalScrollBarVisibility="Auto"
                    ContextMenu="{StaticResource kuvanMenu}"
                    MouseDoubleClick="KuvaLista_MouseDoubleClick">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Border BorderBrush="LightGreen" BorderThickness="1"
                                CornerRadius="3" Margin="1,4,0,0" >
                            <Image Source="{Binding Polkuz}" Margin="5" 
                                    Width="144" Height="138" SnapsToDevicePixels="True"/>
                        </Border>
                        <Label Content="{Binding Pvmz}" Padding="0"
                                HorizontalAlignment="Center" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </DockPanel>
</Grid>
</Window>


*************************************************************************
// 4.2.2018  MainWindow.xaml.cs   (Kuvamatr_testi3)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

// Esitetään kuvajoukko matriisina siten, että oikeassa laidassa on
// skrolli, jos kaikki kuvat eivät mahdu ikkunaan
// Tässä kuvajoukko on ListBoxissa, ja xaml:ssä koodattu Gridin sisään
namespace Kuvamatr_testi3
{
    // -------------------------------------------
    // 28.3.2017
    // Taulukon yksi rivi, edustaa kuvamatriisin yhtä kuvaa
    public class Kuvainfo
    {
        public int IDkoh { get; set; }   // kohde jossa kuva on
        public string Pvmz { get; set; }
        public string Polkuz { get; set; }
        public Image Pikkukuva { get; set; }
    }

    // -------------------------------------------
    // 3.10.2017
    public partial class MainWindow : Window
    {
        public List<Kuvainfo> kuvajoukko;  // tiedot kuvista

        public MainWindow()
        {
            InitializeComponent();

            kuvajoukko = new List<Kuvainfo>();
            string kansioz = @"C:\Users\erkki_000\Desktop\tilap\tyo\testikuvat";
            for (int i = 1; i < 16; i++)
            {
                Kuvainfo kif = new Kuvainfo()
                {
                    Polkuz = $"{kansioz}\\{i}.jpg",
                    Pvmz = $"{i}.7.2016",
                    IDkoh = i
                };
                kuvajoukko.Add(kif);
            }
            kuvamatr.ItemsSource = kuvajoukko;
        }

        // -------------------------------------------
        // 3.10.2017   T28
        // Context Menun klikkaus 'Kohteen tiedot'
        private void MenuItemTiedot_Click(object sender, RoutedEventArgs e)
        {
            if (kuvamatr.SelectedIndex == -1)
            {
                MessageBox.Show("Context Tiedot: Ei ollut mitään valittu", "(T28-02) testi");
                return;
            }
            var kif = (Kuvainfo)kuvamatr.SelectedItem;
            MessageBox.Show($"Nyt hakisimme tietoja kuvasta {kif.IDkoh}", "(T28-03) Testi-ilmoitus");
        }

        // -------------------------------------------
        // 3.10.2017    T27
        // Context Menun klikkaus 'Iso kuva'
        private void MenuItemKuva_Click(object sender, RoutedEventArgs e)
        {
            Kuvainfo kif = (Kuvainfo)kuvamatr.SelectedItem;
            if (kif == null)
            {
                MessageBox.Show("Context Iso kuva: Mitään ei ole valittu.", "(T27-02) Ilmoitus");
                return;
            }
            MessageBox.Show($"nyt menisimme katsomaan kuvaa {kif.IDkoh}", "(T27-03) Testi-ilmoitus");
        }

        // -------------------------------------------
        // 3.10.2017    T30
        // Context Menun klikkaus 'Kopioi kuva'
        private void MenuItemKopioi_Click(object sender, RoutedEventArgs e)
        {
            Kuvainfo kif = (Kuvainfo)kuvamatr.SelectedItem;
            if (kif == null)
            {
                MessageBox.Show("Context Kopioi: Mitään ei ole valittu.", "(T30-02) Ilmoitus");
                return;
            }
            MessageBox.Show($"Nyt kopioisimme katsomaan kuvan {kif.IDkoh} ", "(T30-03) Testi-ilmoitus");
        }

        //----------------------------------------------------------
        // 5.10.2017   T33
        // Käyttäjä kaksoisklikkasi kuvaa ja pääsee katsomaan isoa kuvaa
        private void KuvaLista_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            HitTestResult r = VisualTreeHelper.HitTest(this, e.GetPosition(this));
            if (r.VisualHit.GetType() != typeof(Image))
            {
                MessageBox.Show("Et klikannut mitään kuvaa.", "(T33-01) Ilmoitus");
                return;
            }
            Kuvainfo kif = (Kuvainfo)kuvamatr.SelectedItem;
            if (kif == null)
            {
                MessageBox.Show("Mitään ei ole valittu.", "(T33-02) Ilmoitus");
                return;
            }
            string mz = "\nKokeile kaksoisklikata tyhjää paikkaa!";
            MessageBox.Show($"Nyt menisimme katsomaan kuvaa {kif.IDkoh}.{mz}", "(T33-03) Testi-ilmoitus");
        }

        //----------------------------------------------------------
        // 4.2.2018
        // Käyttäjä halusi poistua
        private void ButtonSulje_Click(object sender, MouseButtonEventArgs e)
        {
            this.Close();
        }

        //----------------------------------------------------------
        // 4.2.2018   T31
        // Käyttäjä haluaa katsoa kuvan tietoja
        private void ButtonTiedot_Click(object sender, MouseButtonEventArgs e)
        {
            Kuvainfo kif = (Kuvainfo)kuvamatr.SelectedItem;
            if (kif == null)
            {
                MessageBox.Show("Mitään ei ole valittu.", "(T31-02) Ilmoitus");
                return;
            }
            MessageBox.Show($"Nyt menisimme katsomaan kuvan {kif.IDkoh} tietoja", "(T31-03) Testi-ilmoitus");
        }
    }
}



--------------------------------
(sivua muokattu  4.2.2018)