Solved

Create Image Buttons in grid using XAML

Posted on 2014-01-16
8
480 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 62

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 62

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
 

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 62

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 62

Expert Comment

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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

For a while now I'v been searching for a circular progress control, much like the one you get when first starting your Silverlight application. I found a couple that were written in WPF and there were a few written in Silverlight, but all appeared o…
A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in an application. Themes can be made up of a set of elements: skins, style sheets, images, and o…
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…
In this video I am going to show you how to back up and restore Office 365 mailboxes using CodeTwo Backup for Office 365. Learn more about the tool used in this video here: http://www.codetwo.com/backup-for-office-365/ (http://www.codetwo.com/ba…

911 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now