WPF. How to add text under image in c#

Question

I have image which I set behind code and now I have to set 3 texts under the picture also behind code, maybe somenoe knoe how to make it? my xaml:

 ...<Style x:Key="imageStyle" TargetType="{x:Type Image}">
                    <Setter Property="Height" Value="152px"/>
                    <Setter Property="Width" Value="762"/>
                </Style>
</windows.Resources>
<Grid>
         <StackPanel x:Name="StackStyle" Background="#FFFFFF" Margin="30,98,250,150">...

My xaml.cs is:

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.Loaded += OnLoaded;
        }

        private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
        {
            Style imgStyle = (Style)Resources["imageStyle"];
            var imag = new Image();
            imag.Style = imgStyle;
            string path = System.AppDomain.CurrentDomain.BaseDirectory + "../../ico.choose-coupon.png";
            imag.Source = new BitmapImage(new Uri(path));


            StackStyle.Children.Add(imag);

        }
    }

do not forget that this is one image, and these text have to be under Gray field.

UPDATE: I get what I want, thats the code: xaml:

<Viewbox Stretch="Fill">
        <Grid>
        <StackPanel Orientation="Vertical" x:Name="myStackPanel"  Background="#FFFFFF" Height="560" Width="968"  HorizontalAlignment="Center" >
            <Label  Style="{StaticResource Label}" ></Label>

        </StackPanel>    
    </Grid>
</Viewbox>

xaml.cs:

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.Loaded += OnLoaded;
        }

        private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
        {


            string path = System.AppDomain.CurrentDomain.BaseDirectory + "../../ico.choose-coupon.png";

            Style imgStyle = (Style)Resources["imageStyle"];

            var imag = new Image();
            imag.Style = imgStyle;
            imag.Source = new BitmapImage(new Uri(path));

            myStackPanel.Children.Add(imag);

            Style textStyle = (Style) Resources["textStyle"];
            var text1 = new TextBlock();
            var text2 = new TextBlock();
            var text3 = new TextBlock();



            text1.Style = textStyle;
            text2.Style = textStyle;
            text3.Style = textStyle;
            text1.Text = "% coupon";
            text2.Text = "Tara receipt";
            text3.Text = "Value coupon";
            text1.Margin = new Thickness(135,22,0,0);
            text2.Margin = new Thickness(210, 22, 0, 0);
            text3.Margin = new Thickness(188, 22, 0, 0);

            var TextPanel = new StackPanel();
            TextPanel.Orientation = Orientation.Horizontal;

            TextPanel.Children.Add(text1);
            TextPanel.Children.Add(text2);
            TextPanel.Children.Add(text3);

            myStackPanel.Children.Add(TextPanel);

        }
    }

Answer 1

You can use a button style. For the Text and the Image you can set an binding to the propertys. Maybe you write an Style for the button so that looks like in your example.

<Button>
     <StackPanel Orientation="Horizontal">
        <Image Source="{Binding Source}">
        <Label Padding="0" Text="{Binding YourText}"></Label>
     </StackPanel>
</Button>

Answer 2

Here is an exmaple of simple UserControl: Add new userControl template to your project. I am attaching an example of userControl with TextBox and TextBlock:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="WpfApplication1.Example"
    x:Name="UserControl"
    d:DesignWidth="640" d:DesignHeight="480" Width="40" Height="40">

    <Grid x:Name="LayoutRoot" Width="40" Height="40" Background="White">
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Test&#x9;" VerticalAlignment="Top" Height="14.32"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="0,17,0,0" TextWrapping="Wrap" Text="Text" VerticalAlignment="Top" Width="40"/>
    </Grid>
</UserControl>

Then in your window, just call to your userControl as much as you want(You can pass objects to it too):

<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>