Solved

Create Image Buttons in grid using XAML

Posted on 2014-01-16
8
481 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

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

Suggested Solutions

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…
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…
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…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

831 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