Search code examples
c#wpfdata-bindingdatagrid

How do Create a Checkbox Element in WPF with Image and Some Text


I want to design a Control Similar to this, where to the left corner would be Some Text and right corner will have Checkbox mark.

I tried doing something like this.

        <ListView x:Name="MyListView">
        <ListView.ItemTemplate>
            <DataTemplate x:Name="DoubleLineDataTemplate" >
                <CheckBox IsChecked="{Binding IsChecked}">
                    <StackPanel Orientation="Horizontal">
                        <Image VerticalAlignment="Center" Source="{Binding Img}">
                        </Image>
                        <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                            <TextBlock Text="{Binding Name}"  />
                        </StackPanel>
                    </StackPanel>
                </CheckBox>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

But the output isn't what I want.

Requirement


Solution

  • you can put Image, text and checkbox in a single Grid and stick text and checkbox to corners:

    <ListView x:Name="MyListView">
        <ListView.ItemTemplate>
            <DataTemplate x:Name="DoubleLineDataTemplate" >
              <Grid>
                <Image VerticalAlignment="Center" Source="{Binding Img}"/>
                <TextBlock Text="{Binding Name}" 
                           VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5"/>
                <CheckBox IsChecked="{Binding IsChecked}"
                          VerticalAlignment="Top" HorizontalAlignment="Right" Margin="5"/>
              </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>