WPF Design question

Question

Lets say i am developing a chat, first you come to a login window and when your logged in i want to use the same window but chaning the control :P how would be the best way to desight this?

is there any good way to implement this what root element should i use?

Thanks a lot!!

Answer 1

If you want to do this all within the same window, you could use a Grid as the root element and host a login element (possibly another grid for layout) and the chat window. These elements would stack on top of one another, depending upon the order in which you declare them. To hide the chat element initially, set its Visibility to Collapsed

You could then have the login element's Visibility set to Collapsed when the user submits their login details, and have the chat element's Visibility set to Visible.

I did something similar once and it worked well for me.

Hope that helps.

EDIT I knocked this together in Kaxaml for you to play with (and because I like playing with XAML):

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
  <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <Border x:Name="_loginForm" BorderBrush="#888" BorderThickness="3" CornerRadius="5"
            HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" Visibility="Visible">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100"/>
          <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="30">Welcome to chat</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="0">User Name</TextBlock>
        <TextBox   Grid.Row="1" Grid.Column="1" x:Name="_userName" />
        <TextBlock Grid.Row="2" Grid.Column="0">Password</TextBlock>
        <TextBox   Grid.Row="2" Grid.Column="1" x:Name="_password"></TextBox>
        <Button    Grid.Row="3" Grid.Column="1">Log In</Button>
      </Grid>
    </Border>
    <DockPanel x:Name="_chatForm" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True" Visibility="Collapsed">
      <DockPanel DockPanel.Dock="Bottom" LastChildFill="True" Height="70">
        <Button DockPanel.Dock="Right" Width="70">_Send</Button>
        <TextBox x:Name="_input" HorizontalAlignment="Stretch">Hello world</TextBox>
      </DockPanel>
      <ListBox x:Name="_messageHistory" />
    </DockPanel>
  </Grid>
</Page>

Initially the element _loginForm is visible. You'd attach a handler for the Log In button's Click event that would hide it, and show the _chatForm instead.

This example shows usage of several layout controls -- the Grid, DockPanel and StackPanel.

Answer 2

Alternatively, you can use a StackPanel for your layout. As a simple example, you can have 2 elements in your panel; a custom login control as well as the chat 'display' control. After successfully logging in, remove the custom login control from your stack so only the chat is visible.

Answer 3

It's WPF! Animate them in and out of view...you can do that now. There's a collaborative project on Google Code called Witty (a desktop Twitter client written in WPF), and they do something really cool that you might want to borrow from. Come to think of it, there's another WPF Twitter client (blu) that does similar animations that you might want to look at.

In Witty, the Settings dialog is a normal window, but when you switch between the tabs, a storyboard slides the part of the window you requested into view. I haven't debugged the app at this level, but I'm assuming that they have a horizontal StackPanel populated with containers that are fixed to the height and width of the dialog, and they slide them in and out with a storyboard.

Take a look at both of these apps for ideas. You may want to do something similar, but being that this is a WPF app, the sky is really the limit.

Witty

blu

Answer 4

Take a look at Josh Smith's article in MSDN magazine (http://msdn.microsoft.com/en-us/magazine/dd419663.aspx). He describes an interesting method where you have a content presenter on your main window use data templates to switch out what the window is showing.

Answer 5

There are already some answers here on, how to swap two elements at the view level. This post offers a way to more fundamentally create a modular application design with interchangeable views.

You could take a look at the Composite Application Library. It is a small library (developed by Microsoft) that among other things aid in making your application more modular. With this you can define regions of your GUI, that can have interchangeable views.

In your containing xaml import the CAL namespace and use RegionManager to define a region:

<Window ...
      xmlns:cal="http://www.codeplex.com/CompositeWPF"
 ...>
...
<ItemsControl cal:RegionManager.RegionName="MyRegion" />
...

Then you can swap views in this region, preferably in a module:

_regionManager.Regions["MyRegion"].Add(new LoginView());

...swap...

_regionManager.Regions["MyRegion"].Add(new ChatView());

This is of course just an outline of what you can do. In order to implement this solution, you will have to look further in to CAL. It has great documentation and lots of examples to learn from.

Answer 6

I think a more intuitive solution is to use a Frame control as the base control of your window - and to use the NavigateService to change the source of the Frame to different Page controls (which could be defined in separate assemblies, or in your same project as different XAML files).

Your Window:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;

    <Frame Source="LogonPage.xaml" NavigationUIVisibility="Hidden" />

</Window>

And your separate LogonPage:

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Logon">

    <!-- Your content of the page goes here... -->
</Page>