CODEWITHSUNDEEP
c#wpflistviewcheckbox
Maxim_A
Maxim_A

Reputation: 377

c# wpf listview checkbox item

I realize Listview for the photo preview.

<xctk:MaterialListBox InkEffectBrush="CornflowerBlue"  IsInkEffectActive="True" Background="Transparent" x:Name="TvBox" ScrollBar.Scroll="TvBox_Scroll" ScrollViewer.ScrollChanged="TvBox_ScrollChanged" GiveFeedback="TvBox_GiveFeedback"  AllowDrop="False" PreviewMouseLeftButtonDown="TvBox_PreviewMouseLeftButtonDown" PreviewMouseMove="TvBox_PreviewMouseMove" Margin="0,0,0,10" HorizontalAlignment="Stretch">
            <xctk:MaterialListBox.ItemContainerStyle>
                <Style TargetType="{x:Type xctk:MaterialListBoxItem}">
                    <Setter Property="Height" Value="100" />
                    <Setter Property="VerticalAlignment" Value="Top" />
                </Style>
            </xctk:MaterialListBox.ItemContainerStyle>
            <xctk:MaterialListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="4" Background="#00FFFFFF"/>
                </ItemsPanelTemplate>
            </xctk:MaterialListBox.ItemsPanel>
            <xctk:MaterialListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" >
                        <Image Height="100" Width="200" Source="{Binding ImageData}"  Stretch="Uniform" />
                        <xctk:MaterialCheckBox Background="BlueViolet" Content="Выбрать" Click="MaterialButton_Click" HorizontalAlignment="Center" Height="35" Margin="0,20" Width="130"/>
                    </StackPanel>
                </DataTemplate>
            </xctk:MaterialListBox.ItemTemplate>
        </xctk:MaterialListBox>

Screnshoot Listview. I need a checkbox on top of the image. Example as needed Prompt please solve this problem. Thank you in advance.

Upvotes: 0

Views: 271

Answers (2)

Sats
Sats

Reputation: 1973

You are using StackPanel to combine to controls. StackPanel is meant to stack the controls inside it, so no matter even if you use Zindex , they wont overlap each other.

I used grid and then Panel.ZIndex , to make the control overlap, use margin to set checkbox accordingly over image.

      <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image Panel.ZIndex="1"  Height="100" Width="200"  Source="Koala.jpg"  Stretch="Uniform" >
                    </Image>
                    <CheckBox Panel.ZIndex="2"  Background="BlueViolet" Content="Выбрать"   Margin="0,20" HorizontalAlignment="Center" Height="35" Width="130">
                    </CheckBox>

                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

Upvotes: 1

cintx
cintx

Reputation: 66

Take a look at the Canvas Panel

You should be able to put both Image and Checkbox into a canvas Panel and set their Top Left and ZIndex properties accordingly

Upvotes: 1

Related Questions