locked
C# Display Image when selecting an appBarButton

    Question

  • I am new to C# and looking to have a textblock listed within grid and when selecting the AppBarButton, I would like to display an image into the TextBlock.  I have been searching forms and nothing really stands out on a simple way of doing this.  I will have different AppBarButtons once I get this figured out and they will display different images to the same textblock.

    xmal:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Image x:Name="image" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="1600" Source="ms-appx:///Images/Header.png" Stretch="Fill"/>
            <AppBarButton x:Name="appBarButton" HorizontalAlignment="Left" Icon="Page" Label="DD160" Margin="157,-6,0,0" VerticalAlignment="Top"  Background="#FF1B0202"  Click="appBarButton_Click"/>
            <HyperlinkButton Content="" HorizontalAlignment="Left" Margin="50,1,0,0" VerticalAlignment="Top" Height="78" Width="89" Click="HyperlinkButton_Click"/>
            <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="193,181,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="249" Width="677"/>



        </Grid>

    .cs

        private void appBarButton_Click(object sender, RoutedEventArgs e)
            {
               
            }

    Sunday, March 22, 2015 1:59 AM

Answers

  • Hi Anger,

    Please divide the grid into no of rows and columns and give rowspan and columnspan for image. Use visibility property and make visibility property of image visible on click of app bar button. I have created a demo app for you.

    <Page
        x:Class="App5.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App5"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image x:Name="MyImage" Source="/Assets/Spring-Lamb_-Image-shot-2-011.jpg" Grid.ColumnSpan="10" Grid.RowSpan="10" Visibility="Collapsed"/>
        </Grid>
        <Page.BottomAppBar>
            <CommandBar>
                <CommandBar.PrimaryCommands>
                    <AppBarButton Icon="Go" IsCompact="False" Label="Click" Click="AppBarButton_Click"
                                  />
                </CommandBar.PrimaryCommands>
            </CommandBar>
        </Page.BottomAppBar>
    </Page>
        
    

    and codebehind code is

            private void AppBarButton_Click(object sender, RoutedEventArgs e)
            {
                MyImage.Visibility = Visibility.Visible;
            }


    Purushothama V S

    • Proposed as answer by Purushothama V S Sunday, March 22, 2015 5:04 AM
    • Marked as answer by EBCAnger Monday, March 23, 2015 10:57 PM
    Sunday, March 22, 2015 5:02 AM

All replies

  • Hi Anger,

    Please divide the grid into no of rows and columns and give rowspan and columnspan for image. Use visibility property and make visibility property of image visible on click of app bar button. I have created a demo app for you.

    <Page
        x:Class="App5.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App5"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image x:Name="MyImage" Source="/Assets/Spring-Lamb_-Image-shot-2-011.jpg" Grid.ColumnSpan="10" Grid.RowSpan="10" Visibility="Collapsed"/>
        </Grid>
        <Page.BottomAppBar>
            <CommandBar>
                <CommandBar.PrimaryCommands>
                    <AppBarButton Icon="Go" IsCompact="False" Label="Click" Click="AppBarButton_Click"
                                  />
                </CommandBar.PrimaryCommands>
            </CommandBar>
        </Page.BottomAppBar>
    </Page>
        
    

    and codebehind code is

            private void AppBarButton_Click(object sender, RoutedEventArgs e)
            {
                MyImage.Visibility = Visibility.Visible;
            }


    Purushothama V S

    • Proposed as answer by Purushothama V S Sunday, March 22, 2015 5:04 AM
    • Marked as answer by EBCAnger Monday, March 23, 2015 10:57 PM
    Sunday, March 22, 2015 5:02 AM
  • got it, much appreciated
    Sunday, March 22, 2015 3:51 PM
  • I guess my answer helped you. Please mark it as answer.


    Purushothama V S

    Monday, March 23, 2015 6:05 AM