How to have multiple content in button?

Question

This is my app: This is my Xaml:

    <Grid Name="grd1" Width="202" Margin="-5,0,0,0" Visibility="Visible">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="16*"/>
            <ColumnDefinition Width="31*"/>
        </Grid.ColumnDefinitions>
        <Button VerticalAlignment="Top" Height="43" HorizontalAlignment="Right" Width="196" Grid.ColumnSpan="2" Margin="-8,0,0,0">
            <Button.Content>
                <CheckBox Name="chk_shortcut_1" IsChecked="False" Checked="chk_shortcut_1_Checked" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="165,-19,0,0" />
            </Button.Content>
        </Button>
        <Button VerticalAlignment="Top" Height="43" HorizontalAlignment="Right" Width="196" Margin="-8,48,0,0" Grid.ColumnSpan="2">
            <CheckBox Name="chk_shortcut_2" IsChecked="False" Checked="chk_shortcut_1_Checked" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="165,-19,0,0" />
        </Button>
        <Button VerticalAlignment="Top" Height="43" HorizontalAlignment="Right" Width="196" Margin="-8,96,0,0" Grid.ColumnSpan="2">
            <CheckBox Name="chk_shortcut_3" IsChecked="False" Checked="chk_shortcut_1_Checked" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="165,-19,0,0" />
        </Button>
    </Grid>
</ListBox>

How can I have image and text and CheckBox inside a Button? Because I want to clone button by checking checkboxes in another listbox later

The `Button.Content` can be any valid content, including other UI elements such as `Grid`, `StackPanel`, etc. More typically, there would be a single view model as the content, with a defined `DataTemplate` for that model. Unfortunately, your question is not at all clear as to what the source of data is, how exactly you want to implement, _what you've tried_, etc. But based on the XAML above, putting `grd1` inside a `Button` would probably work, even if it's not really the best MVVM way. Please improve the question. — Peter Duniho, Jul 18 '20 at 19:15
_"Because I want to clone button by checking checkboxes in another listbox later"_ -- in WPF, any time you want to repeat some visual and you don't need to customize the actual behavior -- i.e. it's sufficient to just bind visual properties to view model properties -- then you should be using `DataTemplate`. Often, this even suffices when you have special handling of events, provided those events are abstracted as `ICommand` in the view model, or can be handled by an event handler in the code-behind for the containing element. Otherwise, you may need `UserControl`. — Peter Duniho, Jul 18 '20 at 19:39
Also, I want my checkbox be inside a button but I don't want that if I click on it, it triggers an event. — Ali Mohammadi, Jul 18 '20 at 20:12
Ali, have you tried putting this content inside a grid, inside a button? — Tom Joney, Jul 18 '20 at 20:35
Does this answer your question? [Multiline Text in a WPF Button](https://stackoverflow.com/questions/1449276/multiline-text-in-a-wpf-button) — Tom Joney, Jul 18 '20 at 20:36
I'd just did that. but i have a new problem: https://stackoverflow.com/questions/62973500/how-can-i-have-diffrent-events-on-diffrent-controls-that-are-in-a-same-grid-in-w — Ali Mohammadi, Jul 18 '20 at 20:37

score 1 · Accepted Answer · answered Jul 18 '20 at 18:56

As far as I know, the button that you need is not a pure component, it's a complex control and need to be implemented by yourself or use third party components like Telerik. But a good answer would be: Create a user control. Use a container component and like Grid and split it to 2 section, left and right. At the left side you should add an image component and right side should contain a readonly text or label. define events to be clickable and configure other behaviors as you need. something like below code can be useful but need to spend more time and work on.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="277*"/>
        <ColumnDefinition Width="523*"/>
    </Grid.ColumnDefinitions>
    <Image HorizontalAlignment="Left" Grid.Column="0" Height="100" Margin="103,225,0,0" VerticalAlignment="Top" Width="100"/>
    <Label Content="Label" Grid.Column="1" HorizontalAlignment="Left" Margin="273,238,0,0" VerticalAlignment="Top"/>
</Grid>

How to have multiple content in button?

1 Answers1