WPF學習-文字編輯器(介面的設計)
阿新 • • 發佈:2018-12-22
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。
3.中間用<Grid>分為左右兩列,左邊用作拼寫錯誤的顯示,右邊為文字的輸入部分。<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>
使用 <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>