How to bind a Command to ItemsControl's template - wpf

Question

I have to create an ItemsControl like below and a view model with a clickcommand. How can I bind the command to its template?
<ItemsControl Name="connStatusList" HorizontalAlignment="Left" VerticalAlignment="Top" Background="#e0e0e0" Margin="0,0,0,0" MinHeight="325" Width="1700" ItemsSource="{Binding }" >
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<Border>
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Name="wp" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal" Background="#ededed" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel Width="135" Height="160" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,1,0,0" >
<WrapPanel Background="{StaticResource connRectangle}" Width="133" Height="128">
<Image Source="{Binding WifiImage}" Width="70" Height="53" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,2,0,0"/>
<Image Source="{Binding ConnectedImage}" Width="43" Height="63" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="45,7,0,0" />
</WrapPanel>
<WrapPanel>
<Label Content="{Binding ItemNO}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="35,0,0,0" FontWeight="Bold" FontSize="18"></Label>
<Label Content="{Binding Connected}" Name="lblconnected" Visibility="Collapsed"></Label>
</WrapPanel>
</WrapPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Answer 1

As you are essentially creating a list of buttons, use a Button in your template to bind the command. I assume your command property is called ClickCommand. You might need to adapt the style of the button e.g. in mouse-over state to fit your application.
<DataTemplate>
<Button Command="{Binding ClickCommand}">
<Button.Content>
<WrapPanel Width="135" Height="160" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,1,0,0" >
<WrapPanel Background="{StaticResource connRectangle}" Width="133" Height="128">
<Image Source="{Binding WifiImage}" Width="70" Height="53" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,2,0,0"/>
<Image Source="{Binding ConnectedImage}" Width="43" Height="63" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="45,7,0,0" />
</WrapPanel>
<WrapPanel>
<Label Content="{Binding ItemNO}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="35,0,0,0" FontWeight="Bold" FontSize="18"></Label>
<Label Content="{Binding Connected}" Name="lblconnected" Visibility="Collapsed"></Label>
</WrapPanel>
</WrapPanel>
</Button.Content>
</Button>
</DataTemplate>
Alternatively, you could use an event trigger from the Microsoft.Xaml.Behaviors.Wpf NuGet package. With this approach, the ClickCommand is invoked on mouse button up, it does not change any style.
<DataTemplate>
<WrapPanel Width="135" Height="160" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,1,0,0">
<b:Interaction.Triggers>
<b:EventTrigger EventName="MouseLeftButtonUp">
<b:InvokeCommandAction Command="{Binding ClickCommand}"/>
</b:EventTrigger>
</b:Interaction.Triggers>
<WrapPanel Background="{StaticResource connRectangle}" Width="133" Height="128">
<Image Source="{Binding WifiImage}" Width="70" Height="53" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,2,0,0"/>
<Image Source="{Binding ConnectedImage}" Width="43" Height="63" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="45,7,0,0" />
</WrapPanel>
<WrapPanel>
<Label Content="{Binding ItemNO}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="35,0,0,0" FontWeight="Bold" FontSize="18"></Label>
<Label Content="{Binding Connected}" Name="lblconnected" Visibility="Collapsed"></Label>
</WrapPanel>
</WrapPanel>
</DataTemplate>