How to binding content of listviewitem in listview?

Question

I'm doing like the red zone

I have a problem. I want when I select the item it will change color. but my button don't show content. I don't know how to bind content from listviewitem? is this my way valid?

This is my code:

  <ListView x:Name="lsvMenuItem" SelectionMode="Single">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="DataContext" Value="{Binding}" />
                    <Setter Property="Height" Value="30" />
                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListViewItem">
                                <Border  Background="Transparent" >
                                    <Button  x:Name="button" HorizontalAlignment="Left" Content="{Binding Path=ListViewItem.Cotent,ElementName=lsvMenuItem}" IsHitTestVisible="False"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="button"  Property="Background" Value="Red"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

            <ListViewItem>
                <Button Background="#FFC1D2F4" BorderBrush="{x:Null}" Foreground="Blue" Content="1"/>
            </ListViewItem>
            <ListViewItem>
                <Button Background="#FFC1D2F4" BorderBrush="{x:Null}" Foreground="Blue" Content="2"/>
            </ListViewItem>
            <ListViewItem>
                <Button Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Blue"   Content="3"  Width="40" />
            </ListViewItem>


        </ListView>

Edit

When I have not used the template code (ListView.ItemContainerStyle)

When I use the template code

I want when I use the template code, it will show content 1 2 3.

Answer 1

The problem with your code is you are trying to get the ListViewItem content (which is a button) in your case and bind to a button's content, which is failing to work. The simplest approach for your problem is to bind ItemsSource from code-behind or from your ViewModel (in case if you are following MVVM pattern).

Here is my modified xaml and code -

<ListView x:Name="lsvMenuItem" SelectionMode="Single">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="DataContext" Value="{Binding}" />
                <Setter Property="Height" Value="30" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Border Background="Transparent" x:Name="MainBorder">
                                <Button x:Name="button" HorizontalAlignment="Left" Content="{Binding}" Background="Transparent" Foreground="Blue"
                                        IsHitTestVisible="False" Width="50" BorderThickness="0"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="MainBorder"  Property="Background" Value="#3d94fb"/>
                                    <Setter TargetName="button"  Property="TextElement.FontWeight" Value="SemiBold"/>
                                    <Setter TargetName="button"  Property="TextElement.Foreground" Value="White"/>
                                    <Setter TargetName="MainBorder" Property="CornerRadius" Value="3"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

And in code-behind I am binding ItemsSource of lsvMenuItem like below,

lsvMenuItem.ItemsSource = new List<string>() { "1", "2", "3" };

Note:- I have added "Foreground="Blue"" property to the Button inside your ControlTemplate itself.

Hope this helps. If any further questions, feel free to ask.