WPF的入門學習

環境的搭配

我們通過VS的官網來安裝的VS2022，安裝上C#的功能，這樣就完成了環境的搭配

第一個wpf工程

打開vs2022，點擊如圖的創建新的工程。

點選WPF的項目

配置一個新的項目

這樣就完成了項目的創建

項目結構

介紹一下大概的項目結構

在APP.XAml文件中，設置我們的窗體入口

界面的處理方式

內容添加
XAML:微軟公司為了構建應用程序用戶界面而創建的一種新的"可擴展應用程序標記語言"，提供了一種便于擴展和定位的語法來定義和程序邏輯分離的用戶界面。

特點:

定義應用程序的界面元素
顯式的聲明WPF資源(樣式、模板、動畫等)
可擴展性(自定義UI空間)
集中關注于界面的設計和實現。

基礎空間

textblock

通過工具箱拖動，拖出來textblock控件。

通過屬性，就可以找到常見的一些屬性

通過對應的事件，響應對應的代碼

比較重要的布局

label控件

擁有跟textblock控件差不多的屬性，事件和布局。

和textblock的區別
Lable的content屬性為OBJECT類型

添加一個button對象在Lable控件中

cs文件中

public MainWindow()
{

    InitializeComponent();

    Button newButton = new Button();
    newButton.Content = "Click me";
    // 根據需要設置其他屬性，例如寬度、高度等
    // newButton.Width = 100;
    // newButton.Height = 30;

    // 將新創建的 Button 賦值給 Label 的 Content
    myLabel.Content = newButton;
}

xaml文件

<Label x:Name="myLabel">
    <Label.Content>
        <Button Content="Click me" />
    </Label.Content>
</Label>

布局控件

布局屬性和布局控件是不同的，布局屬性用來做小范圍的控制，布局控件大區域的劃分。

常見的控件

Grid
StackPanel
WrapPanel
DockPanel
Canvas
UniformGrid

Grid控件

定義行

Xaml語法

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
<Grid/>

定義列
Xaml語法

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid/>

給控件設置布局

 <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="啊~我的妻，王氏寶釵！" VerticalAlignment="Top"
            Grid.Row="2" Grid.Column="1"/>
 <Label x:Name="myLabel" Grid.Row="1" Grid.Column="2">
     <Label.Content>
         <Button Content="Click me" />
     </Label.Content>
 </Label>

StackPanel控件

類似堆棧的視圖

控制方向的代碼

 <StackPanel Orientation="Horizontal">
     <Button Content="Show Message" Click="Button_Click" Foreground="Red"/>
     <Button Content="Show Dialog" Click="Button_Click_1" Foreground="Pink"/>
 </StackPanel>

3. WrapPanel

類似于棋盤的排布，高度比較統一。當是水平分布的時候，會因為其中的任何一個影響行之間的高度，但是不會受到寬度的影響。(反之亦然)

```xaml
 <WrapPanel>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Red"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Green"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Blue"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Yellow"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Orange"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Purple"/>
     <TextBlock Height="150" Width="100" Text="Hello World" Background="Red"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Green"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Blue"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Yellow"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Orange"/>
     <TextBlock Height="100" Width="100" Text="Hello World" Background="Purple"/>
 </WrapPanel>

DockPanel控件

停靠效果的布局控件

<DockPanel LastChildFill="false">
    <TextBlock  Text="Hello World" Background="Green" DockPanel.Dock="Top"/>
    <TextBlock  Text="Hello World" Background="Blue" DockPanel.Dock="Bottom"/>
    <TextBlock  Text="Hello World" Background="Yellow" DockPanel.Dock="Left"/>
    <TextBlock  Text="Hello World" Background="Orange" DockPanel.Dock="Right"/>
    
</DockPanel>

Canvas控件

畫布布局，都是從左邊頂點開始的布局。

xaml

<Canvas>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Gray" Margin="200,0,0,0"/>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Orange" Margin="200,200,0,0"/>
        <TextBlock Width="100" Height="60" Text="Hello" Background="Red" Canvas.Left="300"/>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Green" Canvas.Top="300" Canvas.Left="300"/>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Gray" Canvas.Right="50" Canvas.Bottom="50"/>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Gray" Canvas.Right="50" Canvas.Bottom="50" Canvas.Top="30" Canvas.Left="30" />
    </Canvas>

InkCanvas控件

可編輯的畫布布局控件

 <InkCanvas EditingMode="Select">
        <TextBlock Width="100" Height="40" Text="Hello" Background="Gray" Margin="200,0,0,0"/>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Orange" Margin="200,200,0,0"/>
        <TextBlock Width="100" Height="60" Text="Hello" Background="Red" InkCanvas.Left="300"/>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Green" InkCanvas.Top="300" InkCanvas.Left="300"/>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Gray" InkCanvas.Right="50" InkCanvas.Bottom="50"/>
        <TextBlock Width="100" Height="40" Text="Hello" Background="Gray" InkCanvas.Right="50" InkCanvas.Bottom="50" InkCanvas.Top="30" InkCanvas.Left="30" />
    </InkCanvas>

UniformGrid控件

UniformGrid【統一布局】，提供一種在網格(網格中的所有單元格都具有相同的大小)中排列內容的方法。

    <UniformGrid Columns="2" Rows="5">
        <TextBlock Text="Hello" Background="Gray"/>
        <TextBlock Text="Hello" Background="Orange"/>
        <TextBlock Text="Hello" Background="Red"/>
        <TextBlock Text="Hello" Background="Green"/>
        <TextBlock Text="Hello" Background="Gray"/>
        <TextBlock Text="Hello" Background="Orange"/>
        <TextBlock Text="Hello" Background="Red"/>
        <TextBlock Text="Hello" Background="Green"/>
        <TextBlock Text="Hello" Background="Gray"/>
        <TextBlock Text="Hello" Background="Orange"/>
        <TextBlock Text="Hello" Background="Red"/>
        <TextBlock Text="Hello" Background="Green"/>
        <TextBlock Text="Hello" Background="Gray"/>
        <TextBlock Text="Hello" Background="Orange"/>
        <TextBlock Text="Hello" Background="Red"/>
        <TextBlock Text="Hello" Background="Green"/>
        <TextBlock Text="Hello" Background="Gray"/>
        <TextBlock Text="Hello" Background="Orange"/>
        <TextBlock Text="Hello" Background="Red"/>
        <TextBlock Text="Hello" Background="Green"/>
        <TextBlock Text="Hello" Background="Gray"/>
        <TextBlock Text="Hello" Background="Orange"/>
        <TextBlock Text="Hello" Background="Red"/>
        <TextBlock Text="Hello" Background="Green"/>
        <TextBlock Text="Hello" Background="Gray"/>
        <TextBlock Text="Hello" Background="Orange"/>
        <TextBlock Text="Hello" Background="Red"/>
        <TextBlock Text="Hello" Background="Green"/>
    </UniformGrid>

button控件

xaml文件

    <Label x:Name="myLabel">
        <Label.Content>
            <Button Content="Click me" Click="Button_Click"/>
        </Label.Content>
    </Label>

cs文件

        public MainWindow()
        {
            InitializeComponent();

            Button newButton = new Button();
            newButton.Content = "Click me";
            newButton.Click += Button_Click; // 綁定點擊事件
            myLabel.Content = newButton;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (sender is Button button)
            {
                button.Content = "Title Changed!";
            }
        }

RepeatButton控件

它的主要目的是提供一種在用戶按下并持有時會連續觸發事件的行為。

<StackPanel>
    <RepeatButton Content="nihao" IsEnabled="True" Interval="500" Click="RepeatButton_Click"></RepeatButton>
</StackPanel>

cs文件

private void RepeatButton_Click(object sender, RoutedEventArgs e)
{
   Debug.WriteLine("RepeatButton_Click");
}

TextBox控件


<TextBox Width="300" TextWrapping="Wrap" Text="45r435r43t43t43t34t34t43tretg43t4t34t43tert43tert"
                 Height="50" ScrollViewer.VerticalScrollBarVisibility="Auto" Name="tb"/>

Password控件

  <PasswordBox Password="123456" PasswordChar="A" MaxLength="8" Name="pb" Foreground="#FFF10000"/>

richtext控件

<RichTextBox>
            <FlowDocument>
                <Paragraph>
                    Hello World!
                    <Run Foreground="Red" FontWeight="Bold" FontStyle="Italic">wef</Run>
                     wdf
                    <Hyperlink NavigateUri="https://www.baidu.com">ewrgwgtrbg</Hyperlink>
                     th
                </Paragraph>
                <Paragraph>
                    <Run>Hello</Run>
                </Paragraph>
            </FlowDocument>
        </RichTextBox>

image控件

顯示圖片用的控件

    <Grid.Background>
            <ImageBrush ImageSource="/Images/Logo.png"/>
        </Grid.Background>
        <Image Source="/Images/Logo.png" Height="50"/>

        <!--<Ellipse Width="50" Height="50">
            <Ellipse.Fill>
                <ImageBrush ImageSource="/Images/Logo.png" Stretch="UniformToFill"/>
            </Ellipse.Fill>
        </Ellipse>-->

radiobutton控件

        <Grid>
            <RadioButton Content="男" IsChecked="True" GroupName="A"/>
        </Grid>
        <Grid>
            <RadioButton Content="女" GroupName="A"/>
        </Grid>

        <RadioButton Content="身份證" IsChecked="True" GroupName="B"/>
        <RadioButton Content="護照" GroupName="B"/>

checkbox控件

       <CheckBox Content="蘋果" IsChecked="True"/>
        <CheckBox Content="菠蘿"/>
        <CheckBox Content="鳳梨" IsChecked="{x:Null}"/>

slider控件

xaml文件

    <TextBlock Name="tb"/>
        <Slider Value="5" ValueChanged="Slider_ValueChanged" 
                Minimum="-10" Maximum="100" TickFrequency="10" TickPlacement="Both"
                IsSnapToTickEnabled="True"/>

cs文件

    <TextBlock Name="tb"/>
        <Slider Value="5" ValueChanged="Slider_ValueChanged" 
                Minimum="-10" Maximum="100" TickFrequency="10" TickPlacement="Both"
                IsSnapToTickEnabled="True"/>

progressbar控件

    <TextBlock Name="tb"/>
        <Slider Value="5" ValueChanged="Slider_ValueChanged" 
                Minimum="-10" Maximum="100" TickFrequency="10" TickPlacement="Both"
                IsSnapToTickEnabled="True"/>

combox控件

 <ComboBox Width="200" SelectedIndex="2" SelectionChanged="ComboBox_SelectionChanged">
            <ComboBoxItem Content="---請選擇---"/>
            <ComboBoxItem Content="AAA"/>
            <ComboBoxItem Content="BBB"/>
            <ComboBoxItem Content="CCC"/>
            <ComboBoxItem Content="DDD"/>
        </ComboBox>
        <ComboBox Width="200" Name="comboBox" SelectedIndex="0">
        </ComboBox>

listbox控件

  <TextBlock Name="tb"/>
        <ListBox Name="listBox" SelectionMode="Single" SelectionChanged="listBox_SelectionChanged">
            <!--<ListBoxItem Content="AAAA"/>
            <ListBoxItem Content="BBBB"/>
            <ListBoxItem Content="CCCC"/>
            <ListBoxItem Content="DDDD"/>
            <ListBoxItem Content="EEEE"/>
            <ListBoxItem Content="FFFF"/>-->
        </ListBox>

 private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            tb.Text = (sender as ListBox).SelectedItem.ToString();
        }

listview控件

員工類

public class Employee
    {
        public bool IsSelected { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
        public int Age { get; set; }

        public string Gender { get; set; }
    }

<ListView Grid.Row="1" Name="lv">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="員工名稱" Width="100" DisplayMemberBinding="{Binding Name}"/>
                    <GridViewColumn Header="部門" Width="100" DisplayMemberBinding="{Binding Department}"/>
                    <GridViewColumn Header="年齡" Width="100" DisplayMemberBinding="{Binding Age}"/>
                </GridView>
            </ListView.View>
        </ListView>

List<Employee> employees = new List<Employee>();
            employees.Add(new Employee() { Name = "AAA", Department = "D-1", Age = 19, Gender = "女" });
            employees.Add(new Employee() { IsSelected = true, Name = "BBB", Department = "D-2", Age = 20 });
            employees.Add(new Employee() { Name = "CCC", Department = "D-3", Age = 21, Gender = "男" });
            this.lv.ItemsSource = employees;

dataGrid控件

 List<Employee> employees = new List<Employee>();
            employees.Add(new Employee() { Name = "AAA", Department = "D-1", Age = 19, Gender = "女" });
            employees.Add(new Employee() { IsSelected = true, Name = "BBB", Department = "D-2", Age = 20 });
            employees.Add(new Employee() { Name = "CCC", Department = "D-3", Age = 21, Gender = "男" });
            this.lv.ItemsSource = employees;


            this.dg.ItemsSource = employees;
            this.dgcb.ItemsSource = new List<string> { "男", "女" };

DataGrid Grid.Row="2" Name="dg" AutoGenerateColumns="False" CanUserAddRows="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="員工名稱" Width="100" Binding="{Binding Name}"/>
                <DataGridTextColumn Header="部門" Width="100" Binding="{Binding Department}"/>
                <DataGridTextColumn Header="年齡" Width="100" Binding="{Binding Age}"/>
                <DataGridCheckBoxColumn Header="勾選" Binding="{Binding IsSelected}"/>
                <DataGridComboBoxColumn Header="下拉列表" SelectedItemBinding="{Binding Gender}" x:Name="dgcb">
                </DataGridComboBoxColumn>

                <DataGridTemplateColumn Header="自定義" Width="100">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Text="{Binding Name}"/>
                                <Image Source="images/logo.png"/>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding Name}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

tabcontroler控件

xaml

 <TabControl>
            <TabItem Header="AAAA">
                <TextBlock Text="Hello AAA"/>
            </TabItem>
            <TabItem Header="BBBB">
                <Button Content="Hello BBB"/>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="images/logo.png" Width="20"/>
                        <TextBlock Text="CCCC"/>
                        <Button Content="X"/>
                    </StackPanel>
                </TabItem.Header>
            </TabItem>
            <TabItem Header="DDDD"/>
            <TabItem Header="EEEE"/>
        </TabControl>

xaml

        <Menu Grid.Row="1" Height="30" VerticalAlignment="Top">
            <MenuItem Header="文件(_F)">
                <MenuItem Header="新建(_N)" Click="MenuItem_Click">
                    <MenuItem.Icon>
                        <Image Source="images/logo.png"/>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="打開"/>
                <Separator/>
                <MenuItem Header="添加"/>
            </MenuItem>
            <MenuItem Header="編輯">
                <MenuItem Header="剪切"/>
                <Separator/>
                <MenuItem Header="復制"/>
                <MenuItem Header="粘貼"/>
            </MenuItem>
            <MenuItem Header="視圖"/>
        </Menu>

        <Border Background="Orange" Width="100" Height="30" Grid.Row="1">
            <Border.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="文件(_F)">
                        <MenuItem Header="新建(_N)" Click="MenuItem_Click">
                            <MenuItem.Icon>
                                <Image Source="images/logo.png"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="打開"/>
                        <Separator/>
                        <MenuItem Header="添加"/>
                    </MenuItem>
                    <MenuItem Header="編輯">
                        <MenuItem Header="剪切"/>
                        <Separator/>
                        <MenuItem Header="復制"/>
                        <MenuItem Header="粘貼"/>
                    </MenuItem>
                    <MenuItem Header="視圖"/>
                </ContextMenu>
            </Border.ContextMenu>
        </Border>

treeView控件


     <TreeView Grid.Row="2" SelectedItemChanged="TreeView_SelectedItemChanged"
                  Name="tv">
            <TreeViewItem Header="學生" IsExpanded="True">
                <TreeViewItem Header="一年級" IsExpanded="True">
                    <TreeViewItem Header="AAA"/>
                    <TreeViewItem Header="BBB"/>
                    <TreeViewItem Header="CCC"/>
                </TreeViewItem>
                <TreeViewItem Header="二年級"/>
                <TreeViewItem Header="三年級"/>
            </TreeViewItem>
            <TreeViewItem Header="老師">
                <TreeViewItem Header="AAA"/>
                <TreeViewItem Header="BBB"/>
                <TreeViewItem Header="CCC"/>
            </TreeViewItem>
        </TreeView>

cs

private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            var item = (sender as TreeView).SelectedItem as TreeViewItem;
        }

Calender控件

<Calendar SelectedDate="10/15/2022" DisplayDate="4/25/2022"
                  DisplayDateStart="4/2/2022" DisplayDateEnd="12/10/2022"/>


        <Calendar Grid.Row="1" SelectionMode="MultipleRange"
                  xmlns:sys="clr-namespace:System;assembly=mscorlib">
            <Calendar.BlackoutDates>
                <CalendarDateRange Start="4/3/2022" End="4/10/2022"/>
                <CalendarDateRange Start="5/3/2022" End="5/20/2022"/>
            </Calendar.BlackoutDates>
            <Calendar.SelectedDates>
                <sys:DateTime>11/10/2022</sys:DateTime>
                <sys:DateTime>11/12/2022</sys:DateTime>
                <sys:DateTime>11/18/2022</sys:DateTime>
                <sys:DateTime>11/8/2022</sys:DateTime>
            </Calendar.SelectedDates>
        </Calendar>

dataPicker控件

<DatePicker Grid.Row="2" Height="30" Width="170"
                    SelectedDate="2022-12-01"
                    DisplayDateStart="4/2/2022" DisplayDateEnd="12/10/2022"
                    SelectedDateFormat="Short"
                    FirstDayOfWeek="Sunday"></DatePicker>

savedialog和opendialog

  <StackPanel>
      <Button Content="open" Click="Button_Click" ></Button>
      <Button Content="save" Click="Button_Click_1"></Button>
  </StackPanel>

 private void Button_Click(object sender, RoutedEventArgs e)
 {
     OpenFileDialog openFileDialog = new OpenFileDialog();
     openFileDialog.Filter = "Sql 文件(*.sql)|*.sql|所有文件(*.*)|*.*";
     //openFileDialog.FilterIndex= 1;
     openFileDialog.Multiselect = true;// 允許多選
     if (openFileDialog.ShowDialog() == true)
     {
         //var file = openFileDialog.FileName;
         //openFileDialog.FileNames

         // 進行文件內容讀取 
     }

 }

 private void Button_Click_1(object sender, RoutedEventArgs e)
 {
     SaveFileDialog saveFileDialog = new SaveFileDialog();
     saveFileDialog.Filter = "Sql 文件(*.sql)|*.sql|所有文件(*.*)|*.*";
     if (saveFileDialog.ShowDialog() == true)
     {
         // 獲取保存文件路徑 
         var fn = saveFileDialog.FileName;

         // 文件內容寫入
     }
 }

border控件和Expander控件

<Border Background="Gray" Width="50" Height="50" 
                BorderBrush="Red" BorderThickness="3"
                CornerRadius="5"/>
            <Expander Header="WPF零基礎" IsExpanded="True">
                <StackPanel>
                    <Button Content="第一課"/>
                    <Button Content="第一課"/>
                    <Button Content="第一課"/>
                </StackPanel>
            </Expander>
            <Expander Header="WPF零基礎">
                <StackPanel>
                    <Button Content="第一課"/>
                    <Button Content="第一課"/>
                    <Button Content="第一課"/>
                </StackPanel>
            </Expander>

GroupBox和ViewBox

 <GroupBox Header="WPF">
     <Button Content="第二課"/>
 </GroupBox>
 <GroupBox Header=".NET">
     <Button Content="第二課"/>
 </GroupBox>

 <Viewbox StretchDirection="Both" >
     <Border Background="Orange" Width="60" Height="60">
         <TextBlock Text="Zhaoxi"/>
     </Border>
 </Viewbox>

dispather控件

            <TextBox Text="Hello" Name="tb"/>
            <Button Content="Button" Click="Button_Click"/>

cs文件


            Task.Run(async () =>
            {
                try
                {
                    var value = 200;
                    await Task.Delay(2000);// 請求WebApi
                                           // 給TextBox賦值 
                    this.Dispatcher.Invoke(new Action(() =>
                    {
                        this.tb.Text = value.ToString();
                    }));
                }
                catch (Exception ex)
                {

                }
            });

posted @ 2024-11-06 18:36 飄雨的河閱讀(2229) 評論(0) 收藏舉報

刷新頁面返回頂部

飄雨的河

一個自己學習記錄的學習樂園

WPF的入門學習

環境的搭配

第一個wpf工程

項目結構

界面的處理方式

基礎空間

textblock

label控件

布局控件

button控件

RepeatButton控件

TextBox控件

Password控件

richtext控件

image控件

radiobutton控件

checkbox控件

slider控件

progressbar控件

combox控件

listbox控件

listview控件

dataGrid控件

tabcontroler控件

menu控件

treeView控件

Calender控件

dataPicker控件

savedialog和opendialog

border控件和Expander控件

GroupBox和ViewBox

dispather控件

公告