How to make an Image work like a button?

Question

I have developed an application with Tab Control, I currently have 4 tabs and I would like to navigate between them using an arrow image I created. So I was wondering if there is a way for me to turn that image into a functioning button that will switch tabs as I click it? If so, how?

Thank you

Answer 1

Add image to the button and override the default chrome of the button by using style as given below

   <Button HorizontalAlignment="Left" Margin="33,260,0,0" VerticalAlignment="Top" Width="84" Click="Button_Click" Height="29">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <ContentPresenter                  
                        Margin="{TemplateBinding Padding}"                  
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                  
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"                  
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"                  
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        RecognizesAccessKey="True"                  
                        Content="{TemplateBinding Content}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
        <Button.Content>
            <Image Source="imagepath.extension"/>
        </Button.Content>
    </Button>

and for navigation you can use the SelectedIndex property of the tab control like given below

private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (tab1.SelectedIndex + 1 < tab1.Items.Count)
        {
            tab1.SelectedIndex = tab1.SelectedIndex + 1;
        }
        else
        {
            tab1.SelectedIndex = 0;
        }
    }

Answer 2

You would've get plenty of options on searching in google, anyway it is as sample as shown code snippet.

You can do more customization to it but I'm leaving it to you to explore.

<Button>
    <Image Source="yourimagepath"></Image>
</Button>