WPF Command Binding ItemsControl in Styles

Question

I have a style in the Textboxstyles.xaml as following

<Style x:Key="EmptyItemsControlUsabilityDashboard2017Style" TargetType="ItemsControl">
        <Style.Triggers>
            <Trigger Property="HasItems" Value="false">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Control">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <Image Height="12" Width="12" Source="/YoLo;component/Resources/Images/link.png" Margin="0,3,0,0" />
                            <TextBlock x:Name="EmptyCollectionTextBox" Text="{x:Static UsabilityDashboard2017Loc:DashboardUsability2017Resource.lblNumNotDefined}" 
                                       Style="{StaticResource UsabilityDashboard2017TextBoxStyle}"
                                       HorizontalAlignment="Center"
                                       Margin="5,25,0,25"/>
                            </StackPanel>
                    </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
 </Style>

and I have used it inside another Xaml file as following

 <ItemsControl ItemsSource="{Binding YoLoViewModelsCollection}" Name="YoLoViewModelsItemSource" Style="{StaticResource EmptyItemsControlUsabilityDashboard2017Style}">

Now it shows a text box that the this collection is empty but how can I set command bindings on the text block named "EmptyCollectionTextBox" inside the style that user user click it executes a command?

I have already seen the custom commands but somehow they are not working.

Maybe [this helps](https://stackoverflow.com/questions/7003507/how-to-a-add-a-command-to-a-wpf-textblock). — dymanoid, Jun 11 '18 at 07:54
@dymanoid thanks for the link but not really. I need to do it in Style — AZ_, Jun 11 '18 at 08:37
"Command bindings on the text block"? What exactly do you want to accomplish here? — mm8, Jun 11 '18 at 13:09
I am showing an empty textbox when there is no data in the ItemControl and I want to set a command binding on that TextBlock that when user click on it, it executes a command from my view model. Command is also in viewModel. — AZ_, Jun 11 '18 at 13:22
Please see the ItemsControl YoLoViewModelsCollection, I am using this empty style on that, I hope I have made my point clearer. — AZ_, Jun 11 '18 at 13:23
I see no TextBox. Do you mean TextBlock? A TextBlock has no command property so once again; what are you trying to accomplish? — mm8, Jun 11 '18 at 13:44
@mm8 Thanks, I have understood, I have to use something like this and now I can do Command Bindings (Y) — AZ_, Jun 11 '18 at 13:49
Yeah that could also be but I just want to show some text on which user can click. — AZ_, Jun 11 '18 at 13:55
Sorry, I don't understand your issue. A TextBlock is not clickable by default but you could handle the MouseLeftButtonEvent for it. — mm8, Jun 11 '18 at 14:08

score 1 · Answer 1 · answered Jun 11 '18 at 08:43

There's actually a lot of stuff wrong with this code. First of all I have no idea what that trigger is supposed to be doing, it looks like the controltemplate will only be set if there are no elements in the list?

Secondly, it looks like you're trying to represent each element in the collection with an image and text, all in an ItemsControl. You don't do that by templating the entire control, you do it by templating the ItemTemplate. And you use a DataTemplate, not a ControlTemplate:

Now going back to your actual question, you want notification whenever the TextBlock is clicked on. There are a multitude of different ways to do this, but for this case you may as well replace that TextBlock with a Button, and then override the Template with a ControlTemplate that represents it as a TextBlock. This gives you the best of both worlds: from the GUI's perspective it's really still a TextBlock, but you still get all the button click notifications and Command handler etc:

<Image />

<Button Command="{Binding ClickedCommand}" Cursor="Hand">
    <Button.Template>
        <ControlTemplate>
            <TextBlock Text="Text Binding Goes Here" />
        </ControlTemplate>
    </Button.Template>
</Button>

This particular example assumes that the items in your collection have a command handler called "ClickedCommand". In practice your handler might reside in the parent class (e.g. the main window's view model), in which case you'd need to give your main window a x:Name (e.g. "_this") and bind to that instead, passing the item in as the CommandParameter so it knows which one was clicked:

<Button Command="{Binding ElementName=_this, Path=DataContext.ClickedCommand}" CommandParameter="{Binding}" Cursor="Hand">

And then your main view model has a handler that looks something like this:

    public ICommand ClickedCommand { get { return new RelayCommand<YourCollectionItemType>(OnClicked); } }
    private void OnClicked(YourCollectionItemType item)
    {
    }

the controltemplate will only be set if there are no elements in the list? => yes that's correct — AZ_, Jun 11 '18 at 08:55
Yeah but I want to move all this into styles, so can I do binding in Styles? — AZ_, Jun 11 '18 at 08:56

WPF Command Binding ItemsControl in Styles

1 Answers1