Solved

Create Image Buttons in grid using XAML

Posted on 2014-01-16
8
482 Views
Last Modified: 2014-01-17
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
Comment
Question by:Dovberman
  • 4
  • 4
8 Comments
 
LVL 63

Expert Comment

by:Fernando Soto
ID: 39786746
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
 

Author Comment

by:Dovberman
ID: 39788301
I am just trying to place an image in the button. Instead of placing text in the button.
0
 
LVL 63

Expert Comment

by:Fernando Soto
ID: 39788625
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:Dovberman
ID: 39789081
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
 
LVL 63

Accepted Solution

by:
Fernando Soto earned 400 total points
ID: 39789341
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
 

Author Comment

by:Dovberman
ID: 39789461
Thanks,

It was a matter of making the button size large enough to allow for the image dimensions.
0
 

Author Closing Comment

by:Dovberman
ID: 39789469
Thanks for all the help.  It was a matter of correcting the dimensions as you suggested.
0
 
LVL 63

Expert Comment

by:Fernando Soto
ID: 39789477
Not a problem Dovberman, glad I was able to help.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question