UWP set ImageSource from SplitView

Question

I have a litte SplitView app an now I will set the ImageSource on page2 from mySplitpanel.

How can I get access to all paramaters like SetSource or Visible?

Here is my code

Mainpage.xaml

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="938.137">
    <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 
               CompactPaneLength="50" OpenPaneLength="150">
        <SplitView.Pane>
            <StackPanel Background="Gray">
                <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"
                    Width="50" Height="50" Background="Transparent" Click="MenuButton1_Click"/>
                    <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"
                        Width="50" Height="50" Background="Transparent" Click="MenuButton2_Click"/>
                    <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"
                        Width="50" Height="50" Background="Transparent" Click="MenuButton3_Click"/>
                    <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                     </StackPanel>
        </SplitView.Pane>
        <Frame x:Name="myFrame" />
    </SplitView>

</Page>

Mainpage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace App1
{

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            myFrame.Navigate(typeof(Page1));
        }

        private void MenuButton1_Click(object sender, RoutedEventArgs e)
        {

                myFrame.Navigate(typeof(Page2));
        }

        private void HamburgerButton_Click(object sender, RoutedEventArgs e)
        {
            MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
        }

        private void MenuButton2_Click(object sender, RoutedEventArgs e)
        {
            myFrame.Navigate(typeof(Page1)); //Home
        }

        private void MenuButton3_Click(object sender, RoutedEventArgs e)
        {
            //set image source at page2.myImagePage2
           // ??
        }
    }
}

Page2.xaml

<Page
    x:Class="App1.Page2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#FFE03535">
        <Image x:Name="myImagePage2" HorizontalAlignment="Left" Height="116" Margin="81,112,0,0" VerticalAlignment="Top" Width="175" Source="Assets/LockScreenLogo.png"/>

    </Grid>
</Page>

I want to change the ImageSource at Page2.myImagePage2 from MenuButton3_Click

How can I access a function inside page2?

The function sets the Visibilty of items on Page2. Can I access the function and the items get invisible?

score 1 · Accepted Answer · answered Jan 14 '18 at 07:09

1

You can use the code-behind of Page2 (Page2.xaml.cs) to create a public method that will modify the visibility (like public void HideImage() or public void ChangeImageSource()).

Now to get hold of the current page within the Click handler, use the Frame.Content property:

private void MenuButton3_Click(object sender, RoutedEventArgs e)
{
   var page = myFrame.Content as Page2;
   if ( page != null )
   {
      //do something like calling your custom public method
      //page.HideImage();
   }
}

answered Jan 14 '18 at 07:09

Martin Zikmund

38,440
7
70
91

Oh okay so easy? Thanks! Can i Access the Image Source in the same way? Page.myimage.source or must i cremte a new function that Sets the Image Source and call it? – Jan 14 '18 at 07:40
You can either do it via a method as described (which is in a way cleaner solution), or you can add a `x:FieldModifier="public"` attribute to the `Image`, which will make the image public and will then be accessible from the `Click` handler like `page.myImagePage2.Source` – Martin Zikmund Jan 14 '18 at 08:18

UWP set ImageSource from SplitView

1 Answers1