Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: VB WPF
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 9:30am
Edited 3-Feb-13 11: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 at 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 at 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 at 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 at 3-Feb-13 18:16pm
   
yes, very easy. try using something like : http://www.developerfusion.com/tools/convert/csharp-to-vb/
db7uk at 3-Feb-13 18:16pm
   
Also see my improved solution.
Garethb_83 at 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 at 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 at 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)



Advertise | Privacy | Mobile
Web04 | 2.8.1411022.1 | Last Updated 3 Feb 2013
Copyright © CodeProject, 1999-2014
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