Cfrgtkky

I want to add a clickable event where it goes to specific query action

Example: I have this 3 list Image

how to add an action when I click one of that list and it goes to id that i selected and doing something

Mydb Example Database

Query

select * from library where id_movie = (the one that i clicked)

Xaml

<ItemsControl ItemsSource="{Binding Path=Library}" Margin="0,0,2,0">

    <ItemsControl.ItemTemplate>

        <DataTemplate DataType="viewModels:Card">

            <UniformGrid Rows="1" Columns="1">

                <StackPanel Orientation="Horizontal" Width="100" Height="150" Margin="10,25,0,0" >

                    <Image Width="100" Source="{Binding Path=cover}"/>

                </StackPanel>

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10,0,0,0">

                    <Label Content="{Binding Path=title}"/>

                </StackPanel>

            </UniformGrid>

        </DataTemplate>

    </ItemsControl.ItemTemplate>

    <ItemsControl.ItemsPanel>

        <ItemsPanelTemplate>

            <WrapPanel Orientation="Horizontal"/>

        </ItemsPanelTemplate>

    </ItemsControl.ItemsPanel>

</ItemsControl>

MyClass

public class VModel

{

    public VModel()

    {

        DataTable dt = new DataTable();

        DataSet ds = new DataSet();

        using (MySqlConnection connection = new MySqlConnection("SERVER=localhost;" + "DATABASE=library;" + "UID=root;" + "PASSWORD=;"))

        {

            MySqlDataAdapter adapter = new MySqlDataAdapter();

            adapter.SelectCommand = new MySqlCommand("Select * from movie_list", connection);

            adapter.Fill(dt);

        }



        Library = dt.DefaultView;

    }



    public DataView Library { get; private set; }

}

Change Image control to following code, it will be button with the Image.
See that Command is bind to global DataContext, because in viewmodel I will declare command. I use the command parameter and pass there Id.

<Button Command="{Binding Path=DataContext.DoSomething, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding id}">

     <StackPanel>

          <Image Width="100" Source="{Binding Path=cover}"/>

     </StackPanel>

</Button>

You then need to declare the Command in the ViewModel

public ICommand DoSomething {get;set;}

And initialize it in constructor

DoSomething = new DoSomethingCommand(this);

Add another class to for definition fo command

internal class DoSomethingCommand: ICommand

    {

        private VModel vm;



        public PlotPlane(VModel mainViewModel)

        {

            this.vm = mainViewModel;

        }



        public event EventHandler CanExecuteChanged;



        public bool CanExecute(object parameter)

        {

            return true;

        }



        public void Execute(object parameter)

        {



            var id = (id)parameter;



            //do something, use vm to access your viewmodel





        }

    }

I think this is what you're looking for. Each item is a button, which contains an image and a label. Clicking the button calls a command (on the DataContext of the window) with a parameter.

<ItemsControl.ItemTemplate>

    <DataTemplate DataType="viewModels:Card">

        <Button Command="{Binding DataContext.QueryCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" 

                CommandParameter="{Binding Path=id}">

            <StackPanel>

                <Image Width="100" Source="{Binding Path=cover}"/>

                <Label Content="{Binding Path=title}" HorizontalContentAlignment="Center"/>

            <StackPanel>

        </Button>

    </DataTemplate>

</ItemsControl.ItemTemplate>