Click here to Skip to main content
15,888,816 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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..

HTML
<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
Updated 3-Feb-13 10:47am
v2

1 solution

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:

XML
<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:

C#
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!
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
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900