Solved

Create Image Buttons in grid using XAML

Posted on 2014-01-16
8
477 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 62

Accepted Solution

by:
Fernando Soto earned 400 total points
Comment Utility
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
Comment Utility
Thanks,

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

Author Closing Comment

by:Dovberman
Comment Utility
Thanks for all the help.  It was a matter of correcting the dimensions as you suggested.
0
 
LVL 62

Expert Comment

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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Recently while returning home from work my wife (another .NET developer) was murmuring something. On further poking she said that she has been assigned a task where she has to serialize and deserialize objects and she is afraid of serialization. Wha…
Many of us here at EE write code. Many of us write exceptional code; just as many of us write exception-prone code. As we all should know, exceptions are a mechanism for handling errors which are typically out of our control. From database errors, t…
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…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

743 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

16 Experts available now in Live!

Get 1:1 Help Now