创建基本工程

返回目录

---

 先搭建一个大框框

---

布局图：

---

设计过程：

Step1:布局
 WPF的页面布局、样式、内容是完全分离的。所以，在着急填写内容或者猴急寻找Beautiful样式之前，请老老实实向画家同志学习：先把框架绘制出来。
 我们的Demo非常简单只是把页面分为两列，其中第一列为固定的100个像素点。

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

Step2:导航
 WPF可以只有一个Form，Form的内容可以由Page填充。所以我们先在页面左边做个导航栏。

        <TreeView>
        <TreeViewItem  Header="Empty" />
        <TreeViewItem Header="当前设备" IsExpanded="True">
                <TreeViewItem Header="基本页面"     Tag="Page1" Name="btn1" />
            </TreeViewItem>
        </TreeView>

Step3:Pages的容器
&接下来就是在第二列添加一个Frame用来当做Pages的容器了

        <GroupBox Header="测试页面" Margin="5,5" Grid.Column="1">
            <Frame  Name="frmMain" NavigationUIVisibility="Hidden"></Frame>
        </GroupBox>

Step4:Pages调度实现
 页面的调用显然是要用到C#了，得写一个TreeViewItem 事件，事件的内容是装载一个页面到MainWindows。
 添加事件后的代码如下
xaml事件添加

        <TreeView>
        <TreeViewItem  Header="Empty" />
        <TreeViewItem Header="当前设备" IsExpanded="True">
                <TreeViewItem Header="基本页面"     Tag="Page1" Name="btn1" PreviewMouseLeftButtonDown="btnNav_PreviewMouseLeftButtonDown"/>
            </TreeViewItem>
        </TreeView>
        <GroupBox Header="测试页面" Margin="5,5" Grid.Column="1">
            <Frame  Name="frmMain" NavigationUIVisibility="Hidden"></Frame>
        </GroupBox>

C#事件处理

        private void btnNav_PreviewMouseLeftButtonDown(object sender, RoutedEventArgs e)
        {
            TreeViewItem btn = sender as TreeViewItem;

                this.frmMain.Navigate(new Uri(btn.Tag.ToString() + ".xaml", UriKind.Relative));
        }

Step5:调用Pages
 新建一个page1，在它的xaml文件中添加如下代码

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="50" Foreground="Red" Text="Hello WPF" /> 

---

附录:测试代码