Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 504
  • Last Modified:

Create Image Buttons in grid using XAML

I have defined a grid that has 2 rows and 2 columns.

I need to place image buttons in each column of row 0.

This is what I have.

<Grid x:Name="Clubs" Grid.Row="0" Margin="0,0,0,0" Background="White" Height="36" Width="400" HorizontalAlignment="Center"  >
            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="32">
                </ColumnDefinition >
                <ColumnDefinition
                    Width="32">
                 </ColumnDefinition>
             </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="38">
                </RowDefinition>
                <RowDefinition
                    Height="38">
                </RowDefinition>
              </Grid.RowDefinitions>

            <!--Place buttons in the grid-->
            <Button Content="Button" Grid.Row="0" Grid.Column="0" Width="24" Height="36"
                    HorizontalAlignment="Center" Margin="4,0,0,0" Grid.RowSpan="1">
            </Button>
                <Image
                     Width ="24" Source="C:\Develop\Apps\Holdem\Images\cards_png\C1Clip.png"
                     Height="36"
                     Grid.Row="0"
                />
            <Button Content="Button" Grid.Row="0" Grid.Column="1" Width="24" Height="36"
                    HorizontalAlignment="Center" Margin="4,0,0,0" Grid.RowSpan="1">
            </Button>
            <Image
                     Width ="24" Source="C:\Develop\Apps\Holdem\Images\cards_png\C5Clip.png"
                     Height="36"
                     Grid.Row="0"
                     Grid.Column="1"
                />

Is it correct?

Thanks,
0
Dovberman
Asked:
Dovberman
  • 4
  • 4
1 Solution
 
Fernando SotoRetiredCommented:
Hi Dovberman;

If you are looking to place the image in the context of the button with text then something like this should work, you may have to adjust the Width and Height.

<Grid x:Name="Clubs" 
      Grid.Row="0" 
      Margin="0,0,0,0" 
      Background="White" 
      Height="36" 
      Width="400" 
      HorizontalAlignment="Center"  >
    <Grid.ColumnDefinitions>
        <ColumnDefinition 
                Width="32">
        </ColumnDefinition >
        <ColumnDefinition 
                Width="32">
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition 
                Height="38">
        </RowDefinition>
        <RowDefinition 
                Height="38">
        </RowDefinition>
    </Grid.RowDefinitions>
    <Button Grid.Row="0" 
            Grid.Column="0" 
            Width="24" 
            Height="36" 
            HorizontalAlignment="Center" 
            Margin="4,0,0,0" 
            Grid.RowSpan="1">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <TextBlock>Button</TextBlock>
                        <Image Width ="24" 
                            Source="C:\Develop\Apps\Holdem\Images\cards_png\C1Clip.png" 
                            Height="36" 
                            Grid.Row="0" />
                </StackPanel>
            </Button.Content>
        </Button>
        <Button Grid.Row="0" 
            Grid.Column="1" 
            Width="24" 
            Height="36" 
            HorizontalAlignment="Center" 
            Margin="4,0,0,0" 
            Grid.RowSpan="1">
            <Button.Content>
            <StackPanel Orientation="Horizontal">
                <TextBlock>Button</TextBlock>
                <Image Width ="24" 
                        Source="C:\Develop\Apps\Holdem\Images\cards_png\C5Clip.png" 
                        Height="36" 
                        Grid.Row="0" />
            </StackPanel>
        </Button.Content>
    </Button>
</Grid>

Open in new window

0
 
DovbermanAuthor Commented:
I am just trying to place an image in the button. Instead of placing text in the button.
0
 
Fernando SotoRetiredCommented:
Hi Dovberman;

Seeming that in your question you had the Content set to some string I was thinking you wanted both. In that case just remove the StackPanel and TextBlock from the Button.Content node as shown below.

<Button Grid.Row="0" 
        Grid.Column="0" 
        HorizontalAlignment="Center" 
        Margin="4,0,0,0" 
        Grid.RowSpan="1">
    <Button.Content>
        <Image Width ="24" 
            Source="C:\Develop\Apps\Holdem\Images\cards_png\C1Clip.png" 
            Height="36" 
            Grid.Row="0" />
    </Button.Content>
</Button>
<Button Grid.Row="0" 
        Grid.Column="1" 
        HorizontalAlignment="Center" 
        Margin="4,0,0,0" 
        Grid.RowSpan="1">
    <Button.Content>
        <Image Width ="24" 
            Source="C:\Develop\Apps\Holdem\Images\cards_png\C5Clip.png" 
            Height="36" 
            Grid.Row="0" />
    </Button.Content>
</Button>

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
DovbermanAuthor Commented:
I cannot figure out what I am missing.

Images are vertical lines.  Should be the ace and 2 of clubs.

       <Grid x:Name="Hole" Grid.Row="0" Margin="183,400,183,286" Background="DarkOliveGreen"
              Height="72" Width="114" HorizontalAlignment="Center"  >
            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="54">
                </ColumnDefinition >
                <ColumnDefinition
                    Width="54">
                </ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="72">
                </RowDefinition>
                <RowDefinition
                    Height="72">
                </RowDefinition>
            </Grid.RowDefinitions>

            <!--Place buttons in the grid-->
            <Button x:Name="Hole1" Grid.Row="0" Grid.Column="0" Width="52" Height="72"
                    HorizontalAlignment="Center" Margin="4,0,0,0" Grid.RowSpan="1">
                <Button.Content>
                    <!--Place image in the button-->
                    <Image
                     Width ="51" Source="C:\Develop\Apps\Holdem\Images\cards_png\C1Full.png"
                     Height="68"
                     Grid.Row="0"
                    />
                </Button.Content>
            </Button>
           
            <Button  x:Name="Hole2" Grid.Row="0" Grid.Column="1" Width="52" Height="72"
                    HorizontalAlignment="Center" Margin="4,0,0,0" Grid.RowSpan="1">
                <Button.Content>
                    <Image
                     Width ="51" Source="C:\Develop\Apps\Holdem\Images\cards_png\C2Full.png"
                     Height="68"
                     Grid.Row="0"
                     Grid.Column="1"
                />
                </Button.Content>
            </Button>
         </Grid>
        <TextBox x:Name="PickHoleInstr" HorizontalAlignment="Left" Height="60"
       
         <TextBox x:Name="ReplaceHoleInstr" HorizontalAlignment="Left" Height="60" TextWrapping="NoWrap"
                Text="Tap to replace your hole cards."
                Margin="124,460,0,0" VerticalAlignment="Top" Width="260"
                FontSize="16" Background="Transparent" BorderThickness="0"
                FontWeight="Bold" Foreground="White" />
Sample.jpg
0
 
Fernando SotoRetiredCommented:
Hi Dovberman;

The first issue is with the following line if the Grid is NOT a child of another Grid then remove Grid.Row="0" attribute because that would be inherited from a parent grid. The second issue is Margin="183,400,183,286" which most likely is cutting the area out of the viewing area of the control. Make it as follows Margin="0,0,0,0" which will make it visable and then adjust as needed.
 
<Grid x:Name="Hole" Grid.Row="0" Margin="183,400,183,286" Background="DarkOliveGreen"

Open in new window


The next thing is that Grid.Row="0" inside of the Button.Content is not needed because the layout will be determined by Button. And this holds true for the other Button as well.

<Button x:Name="Hole1" Grid.Row="0" Grid.Column="0" Width="52" Height="72" 
        HorizontalAlignment="Center" Margin="4,0,0,0" Grid.RowSpan="1">
    <Button.Content>
        <!--Place image in the button-->
        <Image 
         Width ="51" Source="C:\Develop\Apps\Holdem\Images\cards_png\C1Full.png" 
         Height="68" 
         Grid.Row="0" />
    </Button.Content>
</Button>

Open in new window

0
 
DovbermanAuthor Commented:
Thanks,

It was a matter of making the button size large enough to allow for the image dimensions.
0
 
DovbermanAuthor Commented:
Thanks for all the help.  It was a matter of correcting the dimensions as you suggested.
0
 
Fernando SotoRetiredCommented:
Not a problem Dovberman, glad I was able to help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now