locked
Configure a Xaml Page for multiple Tapping, Clicking Regions RRS feed

  • Question

  • Working with C# and Xaml, I am writing to determine if regions (or sections) of an image can be configured in the corresponding Xaml page to incorporate the functionality of tapping (or clicking) - similar to clickable hot spots on a web page;

    I have created an image to be utilized as the background of my Windows 8 project landing page, and which is intended to fill an entire page, with 4 regions that will work best if the user can tap (or click) to navigate to a corresponding Xaml page;

    Thanks in advance for any insight;


    robert hellestrae

    Tuesday, March 26, 2013 6:44 PM

Answers

  • Robert,

    The XAML Image element doesn't allow that, but it would be simple enough to put a click-able element on top of the image. I'd probably use a Grid. Something along the lines of:

    <Grid>
       <Grid.RowDefinitions>
           <RowDefinition />
           <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

       <Image Grid.RowSpan="2" Grid.ColumnSpan="2" ... />
       <ClickableWidget Grid.Row="0", Grid.Column="0".../>
       <ClickableWidget Grid.Row="0", Grid.Column="1".../>

    Well, I'm sure you get the idea. Personally, I'd probably use a Button as the "clickable widget", simply because it has a nice clean commanding interface, but really, anything that descends from UIElement (and that's pretty much anything) will work.


    Rebecca M. Riordan

    • Marked as answer by rrobhelle Tuesday, March 26, 2013 10:15 PM
    Tuesday, March 26, 2013 9:39 PM

All replies

  • Robert,

    The XAML Image element doesn't allow that, but it would be simple enough to put a click-able element on top of the image. I'd probably use a Grid. Something along the lines of:

    <Grid>
       <Grid.RowDefinitions>
           <RowDefinition />
           <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

       <Image Grid.RowSpan="2" Grid.ColumnSpan="2" ... />
       <ClickableWidget Grid.Row="0", Grid.Column="0".../>
       <ClickableWidget Grid.Row="0", Grid.Column="1".../>

    Well, I'm sure you get the idea. Personally, I'd probably use a Button as the "clickable widget", simply because it has a nice clean commanding interface, but really, anything that descends from UIElement (and that's pretty much anything) will work.


    Rebecca M. Riordan

    • Marked as answer by rrobhelle Tuesday, March 26, 2013 10:15 PM
    Tuesday, March 26, 2013 9:39 PM
  • Thanks Rebecca - seems to work well;

    robert hellestrae

    Tuesday, March 26, 2013 10:16 PM