1. 程式人生 > >WPF學習-文字編輯器(介面的設計)

WPF學習-文字編輯器(介面的設計)

1.選單欄:使用<Menu>標籤建立,<MenuItem>建立一級和二級選單項

<Menu DockPanel.Dock="Top" HorizontalAlignment="Left" Background="White" BorderBrush="Black" >
            <MenuItem Header="檔案">
                <MenuItem Header="新建" Command="New" />          
                <MenuItem Command="Open"/>
                <MenuItem Command="Save"/>
                <Separator/>
                <MenuItem Header="退出" MouseEnter="MouseEnterExitArea" MouseLeave="MouseLeaveArea" Click="FileExit_Click"/>                            
            </MenuItem>
            <MenuItem Header="工具">
                <MenuItem Header="查詢替換" InputGestureText="Ctrl+F" Click="findAndReplace"/>
                <MenuItem Name="menuAutoWrap" IsChecked="True" Header="自動換行(U)" Click="menuAutoWrap_Click"/>
                <MenuItem Header="拼寫錯誤" MouseEnter="MouseEnterToolHinsArea" MouseLeave="MouseLeaveArea" Click="ToolsSpellingHins_Click"/>
            </MenuItem>
            <MenuItem Header="編輯">
                <MenuItem Command="Undo"/>
                <MenuItem Command="Redo"/>
                <MenuItem Command="Copy"/>
                <MenuItem Command="Cut"/>
                <MenuItem Command="Paste"/>
                <MenuItem Command="Delete"/>
                <MenuItem Command="SelectAll"/>
            </MenuItem>
            <MenuItem Header="文字">
                <MenuItem Header="加粗"/>
                <MenuItem Header="下劃線"/>
                <MenuItem Header="斜線"/>
            </MenuItem>
        </Menu>

2.工具欄:<ToolBar>標籤建立,用 <Separator/>   作為分隔欄,在工具欄中放置一些常用的快捷操作,在button中使用content就不能在button中使用image,兩者都表示button的內容,編譯器會提示不能多次編輯content。

<ToolBar DockPanel.Dock="Top">
            <Button  Command="New" >                
                <Image Source="image/新建.png" Width="20" />
            </Button>
            <Separator/>
            <Button Command="Open" >
                <Image Source="image/開啟.png" Width="20" />
            </Button>
            <Separator/>
            <Button Command="Redo" >
                <Image Source="image/撤銷.png" Width="20" />
            </Button>
            <Separator/>
            <Button Command="Redo" >
                <Image Source="image/重做.png" Width="20" />
            </Button>
            <Separator/>
            <Button Command="Save">
                <Image Source="image/儲存.png" Width="20" />
            </Button>
            <Separator/>            
            <Button Content="exit" MouseEnter="MouseEnterExitArea" MouseLeave="MouseLeaveArea" Click="FileExit_Click"></Button>
            <Separator/>
            <Button Content="check" MouseEnter="MouseEnterToolHinsArea" MouseLeave="MouseLeaveArea" Click="ToolsSpellingHins_Click" Cursor="Help" ></Button>
            <Separator/>
        </ToolBar>
        <ToolBar  DockPanel.Dock="Top">            
           <Button Command="Copy">
                <Image Source="image/複製.png" Width="20" />
            </Button>
            <Separator/>
            <Button Command="Paste">
                <Image Source="image/貼上.png" Width="20" />
            </Button>            
            <Separator/>
            <Button Command="Cut">
                <Image Source="image/剪下.png" Width="20" />
            </Button>
            <Separator/>
            <Button Click="findAndReplace" >
                <Image Source="image/查詢替換.png" Width="20" />
            </Button>
            <Separator/>
            <Button Content="delete" Command="Delete" />
            <Separator/>
            
        </ToolBar>    
3.中間用<Grid>分為左右兩列,左邊用作拼寫錯誤的顯示,右邊為文字的輸入部分。
使用 <Expander>標籤,縮放的顯示拼寫錯誤,要實現文字的拼寫錯誤檢查,需要使 SpellCheck.IsEnabled為True。
 <TextBox Grid.Column="1" SpellCheck.IsEnabled="True" AcceptsReturn="True" Name="txtData" 
                     FontSize="14" BorderBrush="Blue" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">


4.內建的控制元件命令物件

WPF控制元件命令是支援以Command為字尾的物件,返回實現ICommand介面.

(1)將命令連線到Command屬性

<MenuItem Command="Copy"/>
                <MenuItem Command="Cut"/>
                <MenuItem Command="Paste"/>

(2)將命令連線到任意行為,使用 <CommandBinding>繫結Executed和 CanExecute

 <Window.CommandBindings>
        <CommandBinding Command="Open" Executed="OpenCmdExecuted" CanExecute="OpenCmdCanExecuted"/>
 </Window.CommandBindings>

實現Executed和 CanExecute事件,在CanExecute事件中e.CanExecute = true;執行Executed事件中的行為,如果要阻止命令的執行,可以講CanExecute設定為false。

哪些行為需要將命令連線行為?

答:點選命令後需要進行其他程式碼操作的就需要連線其他行為,只需要執行原始的功能將命令連線到Command屬性即可。

這裡需要繫結的命令有:

 <Window.CommandBindings>
        <CommandBinding Command="Open" Executed="OpenCmdExecuted" CanExecute="OpenCmdCanExecuted"/>
        <CommandBinding Command="Save" Executed="SaveCmdExecuted" CanExecute="SaveCmdCanExecuted"/>       
        <CommandBinding Command="New" Executed="NewCmdExecuted" CanExecute="NewCmdCanExecuted"/>
        <CommandBinding Command="Undo" Executed="UndoCmdExecuted" CanExecute="UndoCmdCanExecuted"/>
        <CommandBinding Command="SelectAll" Executed="SelectAllCmdExecuted" CanExecute="SelectAllCmdCanExecuted"/>
        <CommandBinding Command="Delete" Executed="DeleteCmdExecuted" CanExecute="DeleteCmdCanExecuted"/>
    </Window.CommandBindings>

4.狀態列:

        <StatusBar DockPanel.Dock="Bottom" Background="Beige">
            <StatusBarItem>
                <TextBlock Name="statBarText" Text="Ready"/>
            </StatusBarItem>
        </StatusBar>