Click here to Skip to main content
12,944,138 members (52,889 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
I'm new to The world of programming and was looking to start with WPF.
I'm trying to create a kiosk type app which will have a static side menu. The main window will initially have an instruction centre screen with current time. What I then want to do is depending what button is pressed on the menu, ie settings, the main content area update with a screen relating to settings etc. I'm not sure what the terms are that I need to read/research. I was hoping to keep the swapping of the screens down to the use of the side menu.

Can anyone point me in the right direction?


Here is what I have so far..

<Window x:Class="MainScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="768" Width="1366">
<Grid>
        <DockPanel LastChildFill="True">
           <TextBlock FontSize="50" TextWrapping="Wrap">THIS IS WHERE I NEED TO POSITION THE MAIN CONTENT.  tHIS WILL CHANGE DEPENDING ON WHAT MENU IS SELECTED FROM THE SIDE BAR</TextBlock>
        </DockPanel>
 
        <DockPanel LastChildFill="False">
            <Border DockPanel.Dock="Right" Width="100" Margin="0" Opacity=".9" >
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.20">
                        <GradientStop Color="#FF4B4343" Offset="0"/>
                        <GradientStop Color="#FFACB0B0" Offset="0.567"/>
                    </LinearGradientBrush>
                </Border.Background>
                <StackPanel Margin="20">
                    <Button Margin="0,10,0,0" Width="50" Height="50">Menu 1</Button>
                    <Button Margin="0,10,0,0" Width="50" Height="50">Menu 2</Button>
                    <Button Margin="0,10,0,0" Width="50" Height="50">Menu 3</Button>
                    <Button Margin="0,10,0,0" Width="50" Height="50">Menu 4</Button>
                    <Button Margin="0,10,0,0" Width="50" Height="50">Menu 5</Button>
                </StackPanel>
            </Border>
            <Border DockPanel.Dock="Bottom" Padding="20" Margin="20" Width="300" HorizontalAlignment="Left" CornerRadius="10" removed="Black" Opacity="0.7">
                <TextBlock FontSize="50" Foreground="White" TextAlignment="Center">10:50</TextBlock>
            </Border>
        </DockPanel>
 
    </Grid>
   
</Window>
Posted 3-Feb-13 8:30am
Updated 3-Feb-13 10:47am
v2

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

You have two options.

Using the navigation framework or manually adding the controls to the main window. Basically, I would do the latter. To do this you need to create a main window or user control. In this you add a content control. You would then in code, add other user controls to the content control.

This is a very basic and high overview. Please see some links below that will help.

thanks

WPF-A-Beginner-s-Guide-Part-1-of-n[^]

Without blowing your mind too much, I recommend you start to understand MVVM with WPF. I would also recommend using a framework that handles many of the boiler plate or comlex code that you end up writing.

Here are some recommended links:

http://cinch.codeplex.com[^]
http://compositewpf.codeplex.com/[^]

I use the Prism framework. I big learning curve, but the sample downloads and the accompanying documentation are really good.

Finally I would also recommend In the Box – MVVM Training[^]

UPDATE:
Ok, Add 3 wpf usercontrols to your solution called view1,view2 and view3.

Next try:

<Window x:Class="TestWPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Width="800"
        Height="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border Margin="10"
                BorderBrush="BlueViolet"
                BorderThickness="2"
                CornerRadius="8">
            <StackPanel Orientation="Vertical">
                <Button Name="Btn1" Margin="10" Tag="1" Click="MenuBtn_OnClick">View 1</Button>
                <Button Name="Btn2" Margin="10" Tag="2" Click="MenuBtn_OnClick">View 2</Button>
                <Button Name="Btn3" Margin="10" Tag="3" Click="MenuBtn_OnClick">View 2</Button>
            </StackPanel>
        </Border>
        <Border Grid.Column="1"
                Margin="10"
                BorderBrush="Chartreuse"
                BorderThickness="2"
                CornerRadius="8">
            <ContentControl Name="CcMainContent" />
        </Border>
    </Grid>
</Window>


then in code behind something like:

namespace TestWPFApplication
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            Loaded += (s, e) => LoadView(1);
        }
 
        public void LoadView(int viewId)
        {
            switch (viewId)
            {
                case 1:
                    CcMainContent.Content = new View1();
                    break;
                case 2:
                    CcMainContent.Content = new View2();
                    break;
                case 3:
                    CcMainContent.Content = new View3();
                    break;
            }
        }
 
        private void MenuBtn_OnClick(object sender, RoutedEventArgs e)
        {
            Button menuButton = sender as Button;
 
            if (menuButton != null)
            {
                LoadView(Convert.ToInt32(menuButton.Tag));
            }
        }
    }
}


UPDATE 2: AND IN VB!
Namespace TestWPFApplication
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
            AddHandler Loaded, AddressOf MainWindow_Loaded
        End Sub
 
        Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs)
            LoadView(1)
        End Sub
 
        Public Sub LoadView(viewId As Integer)
            Select Case viewId
                Case 1
                    CcMainContent.Content = New View1()
                Case 2
                    CcMainContent.Content = New View2()
                Case 3
                    CcMainContent.Content = New View3()
            End Select
        End Sub
 
        Private Sub MenuBtn_OnClick(sender As Object, e As RoutedEventArgs)
            Dim menuButton As Button = TryCast(sender, Button)
 
            If menuButton IsNot Nothing Then
                LoadView(Convert.ToInt32(menuButton.Tag))
            End If
        End Sub
    End Class
End Namespace
  Permalink  
v3
Comments
Garethb_83 3-Feb-13 16:46pm
   
Hi there, this is the first time i have used forums.. Tried to put code in the comment box which Idon't think it supports. I have reposted as a solution. Not sure If I have done the right thing but its displaying now below.
db7uk 3-Feb-13 17:22pm
   
You cannot add formatted code to a comment window. What you should have done was to "improve question" and add more detail. That said, see my very basic example. in my Improved solution.

Thanks
Garethb_83 3-Feb-13 18:05pm
   
Thats super. I'm understanding whats going on (Sort of) but i have only been learning VB.. Can I set the default source of the content control within the XAML then adjust the view by the button... Is it fairly easy to convert to VB?
db7uk 3-Feb-13 18:16pm
   
yes, very easy. try using something like : http://www.developerfusion.com/tools/convert/csharp-to-vb/
db7uk 3-Feb-13 18:16pm
   
Also see my improved solution.
Garethb_83 3-Feb-13 18:36pm
   
I have and implemnted in my project. Working great. The only thing i'm struggling with is setting the default view onload.
db7uk 3-Feb-13 18:39pm
   
ok, if you get stuck post your question. Dont forget to mark this as accepted answer if you are happy with the result. If you need another question I would post a new one as this is getting pretty long :) Good luck!
Garethb_83 3-Feb-13 18:41pm
   
Thanks very much. Will do some googling now for setting the first/default content. I cant seem to grap it from your C#. Thanks again!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month
OriginalGriff 4,653
CHill60 2,970
Maciej Los 2,388
Jochen Arndt 1,900
ppolymorphe 1,765


Advertise | Privacy | Mobile
Web01 | 2.8.170518.1 | Last Updated 3 Feb 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100