WPF Design вопрос

Question

Допустим, я разрабатываю чат, сначала вы заходите в окно входа в систему, и когда вы вошли в систему, я хочу использовать то же окно, но переключая элемент управления: P как бы это было лучше всего?

Есть ли хороший способ реализовать это, какой корневой элемент я должен использовать?

Большое спасибо !!

Answer 1

Взгляните на статью Джоша Смита в журнале MSDN (http://msdn.microsoft.com/en-us/magazine/dd419663.aspx).. Он описывает интересный метод, при котором у вас в главном окне есть ведущий контента, использующий шаблоны данных, чтобы отключить отображение окна.

Answer 2

Если вы хотите сделать все это в одном и том же окне, вы можете использовать Grid в качестве корневого элемента и разместить элемент входа (возможно, другую сетку для макета) и окно чата. Эти элементы будут накладываться друг на друга, в зависимости от порядка их объявления. Чтобы изначально скрыть элемент чата, установите для параметра Visibility значение Collapsed

.

После этого вы можете установить Visibility элемента входа в систему на Collapsed, когда пользователь отправит свои данные для входа, а Visibility элемента chat установить на Visible.

Однажды я сделал нечто подобное, и у меня это получилось.

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ Я собрал это вместе в Kaxaml, чтобы вы могли поиграть с ним (и потому что мне нравится играть с XAML):

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <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>

Изначально элемент _loginForm виден. Вы бы прикрепили обработчик для события Click кнопки «Войти», который бы его скрывал, и вместо него отобразили бы _chatForm.

В этом примере показано использование нескольких элементов управления макетом - Grid, DockPanel и StackPanel.

Answer 3

Я думаю, что более интуитивным решением является использование элемента управления Frame в качестве базового элемента управления вашего окна и использование NavigateService для изменения источника Frame на другие элементы управления Page (которые могут быть определены в отдельных сборках или в ваш тот же проект, что и разные файлы XAML).

Ваше окно:

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

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

</Window>

И ваш отдельный 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>

Answer 4

Здесь уже есть несколько ответов о том, как поменять местами два элемента на уровне представления. Этот пост предлагает способ более фундаментально создать модульный дизайн приложения со сменными представлениями.

Вы можете взглянуть на библиотеку составных приложений . Это небольшая библиотека (разработанная Microsoft), которая, помимо прочего, помогает сделать ваше приложение более модульным. При этом вы можете определить области вашего графического интерфейса, которые могут иметь взаимозаменяемые виды.

В содержащем xaml импортируйте пространство имен CAL и используйте RegionManager для определения региона:

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

Затем вы можете поменять местами представления в этом регионе, предпочтительно в модуле :

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

... замена ...

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

Это, конечно, просто набросок того, что вы можете сделать. Чтобы реализовать это решение, вам придется заглянуть в CAL. Он имеет отличную документацию и множество примеров для изучения.

Answer 5

Это WPF! Анимируйте их внутри и вне поля зрения ... вы можете сделать это сейчас. В Google Code есть совместный проект под названием Witty (клиент Twitter для настольных компьютеров, написанный на WPF), и они делают что-то действительно классное, что вы, возможно, захотите позаимствовать. Если подумать, есть еще один клиент Twitter для WPF (blu), который выполняет похожие анимации, на которые вы, возможно, захотите посмотреть.

В Witty диалоговое окно «Настройки» является обычным окном, но когда вы переключаетесь между вкладками, раскадровка перемещает часть окна, которую вы запрашивали, в представление. Я не отлаживал приложение на этом уровне, но я предполагаю, что у них есть горизонтальная панель StackPanel, заполненная контейнерами, которые зафиксированы по высоте и ширине диалогового окна, и они вставляют их в раскадровку. *

Взгляните на оба эти приложения для идей. Возможно, вы захотите сделать что-то подобное, но, учитывая, что это приложение WPF, небо - это предел.

остроумный

голуб

Answer 6

Кроме того, вы можете использовать StackPanel для вашего макета. В качестве простого примера, вы можете иметь 2 элемента на вашей панели; настраиваемый элемент управления входом в систему, а также элемент управления отображением чата. После успешного входа в систему удалите пользовательский элемент управления входом из стека, чтобы был виден только чат.