WPF 笔记 一 入门和 基本控件

目录

• 入门
  •  账号密码
  • WrapPanel
  • Grid 中的MouseUp事件
• 资源
  • 例子一
  • 资源 下拉列表
• 全局异常处理
• 基本控件
  • TextBlock
  • TextBlock 格式化显示
  • Label
  • TextBox
  •  Button
  • CheckBox
  • RadioButton
  • Image
  •  Border
• ToolTip
• 控制文本渲染选项
•  其他

 

---

回到顶部

入门

Window 下面只有一个Content ，比如Grid

 账号密码

        <Label Content="账号" HorizontalAlignment="Left" Margin="135,66,0,0" HorizontalContentAlignment="Right" VerticalAlignment="Top" Width="70"/>
        <TextBox Name="tbAccount" HorizontalAlignment="Left" Height="23" Margin="228,68,0,0" TextWrapping="NoWrap" Text="" VerticalAlignment="Top" Width="120"/>
        <Label Content="密码" HorizontalAlignment="Left" Margin="135,106,0,0" HorizontalContentAlignment="Right" VerticalAlignment="Top" Width="70"/>
        <PasswordBox Name="tbPwd" HorizontalAlignment="Left" Height="23" Margin="228,108,0,0" Password="123456" VerticalAlignment="Top" Width="120"/>

 

WrapPanel

        Title="MainWindow" Height="450" Width="800">
    <WrapPanel >
        <Button>Test button 1</Button>
        <Button>Test button 2</Button>
        <Button>Test button 3</Button>
        <Button Height="40">Test button 4</Button>
        <Button>Test button 5</Button>
        <Button>Test button 6</Button>
    </WrapPanel>

面板以一行或者一列的形式来布置控件，当一行（列）放满之后自动转到下一行（列）

当WrapPanel使用水平方向时，基于最高的项，子控件将被赋予相同的高度。当WrapPanel是垂直方向时，基于最宽的项，子控件将被赋予相同的宽度。

 

Grid 中的MouseUp事件

    <Grid Name="Good" MouseUp="Good_MouseUp" Background="Transparent">
    </Grid>

        private void Good_MouseUp(object sender, MouseButtonEventArgs e)
        {
            MessageBox.Show("HI");
        }

注意：xaml中的Background不可缺，否则无效。

 

回到顶部

资源

https://www.cnblogs.com/zty1294625258/p/6018928.html

例子一

        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <sys:String x:Key="strHelloWorld">Hello, world!</sys:String>
    </Window.Resources>
    <StackPanel Margin="10">
        <TextBlock Text="{StaticResource strHelloWorld}" FontSize="56" />
        <TextBlock>Just another "<TextBlock Text="{StaticResource strHelloWorld}" />" example, but with resources!</TextBlock>
    </StackPanel>
</Window>

 

资源 下拉列表

          xmlns:sys="clr-namespace:System;assembly=mscorlib"

 <Window.Resources>
        <sys:String x:Key="ComboBoxTitle">Items:</sys:String>

        <x:Array x:Key="ComboBoxItems" Type="sys:String">
            <sys:String>Item #1</sys:String>
            <sys:String>Item #2</sys:String>
            <sys:String>Item #3</sys:String>
        </x:Array>

        <LinearGradientBrush x:Key="WindowBackgroundBrush">
            <GradientStop Offset="0" Color="Silver"/>
            <GradientStop Offset="1" Color="Gray"/>
        </LinearGradientBrush>
    </Window.Resources>
    <StackPanel Margin="10">
        <Label Content="{StaticResource ComboBoxTitle}" />
        <ComboBox ItemsSource="{StaticResource ComboBoxItems}" />
    </StackPanel>

 

 

寻找不同区域内的资源

App.xaml有

    <Application.Resources>
        <sys:String x:Key="strApp">Hello, Application world!</sys:String>
    </Application.Resources>

 

Window.xaml

    <Window.Resources>
        <sys:String x:Key="strWindow">Hello, Window world!</sys:String>
    </Window.Resources>
    <DockPanel Margin="10" Name="pnlMain">
        <DockPanel.Resources>
            <sys:String x:Key="strPanel">Hello, Panel world!</sys:String>
        </DockPanel.Resources>

        <WrapPanel DockPanel.Dock="Top" HorizontalAlignment="Center" Margin="10">
            <Button Name="btnClickMe" Click="btnClickMe_Click">Click me!</Button>
        </WrapPanel>

        <ListBox Name="lbResult" />
    </DockPanel>

 

对于cs文件中

        private void btnClickMe_Click(object sender, RoutedEventArgs e)
        {
            lbResult.Items.Add(pnlMain.FindResource("strPanel").ToString());
            lbResult.Items.Add(this.FindResource("strWindow").ToString());
            lbResult.Items.Add(Application.Current.FindResource("strApp").ToString());
        }

 

回到顶部

全局异常处理

App.xaml

             DispatcherUnhandledException="Application_DispatcherUnhandledException"

对应的cs文件

    public partial class App : Application
    {
        private void Application_DispatcherUnhandledException(object sender, System.Windows.Threading.DispatcherUnhandledExceptionEventArgs e)
        {
            MessageBox.Show("An exception occurred." + e.Exception.Message, "Exception", MessageBoxButton.OK, MessageBoxImage.Error);
            e.Handled = true;
        }
    }

回到顶部

基本控件

 

TextBlock

    <StackPanel>
        <TextBlock Margin="10" Foreground="Red">
            This is a TextBlock control<LineBreak />
            with multiple lines of text.
        </TextBlock>
        <TextBlock Margin="10" TextTrimming="CharacterEllipsis" Foreground="Green">
            This is a TextBlock control with text that may not be rendered completely, which will be indicated with an ellipsis.
        </TextBlock>
        <TextBlock Margin="10" TextWrapping="Wrap" Foreground="Blue">
            This is a TextBlock control with automatically wrapped text, using the TextWrapping property.
        </TextBlock>
    </StackPanel>

 

表示显示长度不够，以...显示

TextWrap Wrap表示自动换行

 

 

TextBlock 格式化显示

 

 

    <TextBlock Margin="10" TextWrapping="Wrap">
            TextBlock with <Bold>bold</Bold>, <Italic>italic</Italic> and <Underline>underlined</Underline> text.
            This is a Link <Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="https://www.baidu.com">link</Hyperlink> in it.

    </TextBlock>

处理RequestNavigate

            System.Diagnostics.Process.Start(e.Uri.AbsoluteUri);

 Span的用法

 

    <Grid>
        <TextBlock Margin="10" TextWrapping="Wrap">
            This <Span FontWeight="Bold">is</Span> a
            <Span Background="Silver" Foreground="Maroon">TextBlock</Span>
            with <Span TextDecorations="Underline">several</Span>
            <Span FontStyle="Italic">Span</Span> elements,
            <Span Foreground="Blue">
                using a <Bold>variety</Bold> of <Italic>styles</Italic>
            </Span>.
        </TextBlock>
    </Grid>

 

Label

最简单的Label

    <Grid>
        <Label Content="This is a Label control." />
    </Grid>

此时除了语法，功能和textblock一样

 

    <StackPanel Margin="10">
        <Label Target="{Binding ElementName=txtName}">
            <StackPanel Orientation="Horizontal">
                <Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_green.png" />
                <AccessText Text="_Name:" />
            </StackPanel>
        </Label>
        <TextBox Name="txtName" />
        <Label Target="{Binding ElementName=txtMail}">
            <StackPanel Orientation="Horizontal">
                <Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_blue.png" />
                <AccessText Text="_Mail:" />
            </StackPanel>
        </Label>
        <TextBox Name="txtMail" />
    </StackPanel>

 按住Alt + N或者M可以切换textbox

 

TextBox

一个接受回车，多行显示的TextBox

        <TextBox AcceptsReturn="True" TextWrapping="Wrap" />

 Button

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

 

 

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

 

 

<Button Padding="5,2">Hello, World!</Button>

表示边上的填充为5，顶部和底部填充为2

 

CheckBox

标准版

    <StackPanel Margin="10">
        <Label FontWeight="Bold">Application Options</Label>
        <CheckBox>Enable feature ABC</CheckBox>
        <CheckBox IsChecked="True">Enable feature XYZ</CheckBox>
        <CheckBox>Enable feature WWW</CheckBox>
    </StackPanel>

自定义内容

    <StackPanel Margin="10">
        <Label FontWeight="Bold">Application Options</Label>
        <CheckBox>
            <TextBlock>
                Enable feature <Run Foreground="Green" FontWeight="Bold">ABC</Run>
            </TextBlock>
        </CheckBox>
        <CheckBox IsChecked="True">
            <WrapPanel>
                <TextBlock>
                    Enable feature <Run FontWeight="Bold">XYZ</Run>
                </TextBlock>
                <Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="5,0" />
            </WrapPanel>
        </CheckBox>
        <CheckBox>
            <TextBlock>
                Enable feature <Run Foreground="Blue" TextDecorations="Underline" FontWeight="Bold">WWW</Run>
            </TextBlock>
        </CheckBox>
    </StackPanel>

 

RadioButton

标准

 

    <StackPanel Margin="10">
        <Label FontWeight="Bold">Are you ready?</Label>
        <RadioButton>Yes</RadioButton>
        <RadioButton>No</RadioButton>
        <RadioButton IsChecked="True">Maybe</RadioButton>
    </StackPanel>

分组

        <StackPanel Margin="10">
            <Label FontWeight="Bold">Are you ready?</Label>
            <RadioButton GroupName="ready">Yes</RadioButton>
            <RadioButton GroupName="ready">No</RadioButton>
            <RadioButton GroupName="ready" IsChecked="True">Maybe</RadioButton>

            <Label FontWeight="Bold">Male or female?</Label>
            <RadioButton GroupName="sex">Male</RadioButton>
            <RadioButton GroupName="sex">Female</RadioButton>
            <RadioButton GroupName="sex" IsChecked="True">Not sure</RadioButton>
        </StackPanel>

自定义

    <StackPanel Margin="10">
        <Label FontWeight="Bold">Are you ready?</Label>
        <RadioButton>
            <WrapPanel>
                <Image Source="/WpfTutorialSamples;component/Images/accept.png" Width="16" Height="16" Margin="0,0,5,0" />
                <TextBlock Text="Yes" Foreground="Green" />
            </WrapPanel>
        </RadioButton>
        <RadioButton Margin="0,5">
            <WrapPanel>
                <Image Source="/WpfTutorialSamples;component/Images/cancel.png" Width="16" Height="16" Margin="0,0,5,0" />
                <TextBlock Text="No" Foreground="Red" />
            </WrapPanel>
        </RadioButton>
        <RadioButton IsChecked="True">
            <WrapPanel>
                <Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="0,0,5,0" />
                <TextBlock Text="Maybe" Foreground="Gray" />
            </WrapPanel>
        </RadioButton>
    </StackPanel>

 

 

Image

基本

    <StackPanel Margin="10">
        <Image Source="https://www.baidu.com/img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png" />

    </StackPanel>

Source可以是远程路径，也可以是本地相对路径比如/Images/google.png。。

 动态加载

    Uri fileUri = new Uri(openFileDialog.FileName);
    imgDynamic.Source = new BitmapImage(fileUri);

Image 的Stretch属性

Uniform: 这是默认模式。 图片将自动缩放，以便它适合图片区域。 将保留图片的宽高比。
UniformToFill: 图片将被缩放，以便完全填充图片区域。 将保留图片的宽高比。
Fill: 图片将缩放以适合图片控件的区域。 可能无法保留宽高比，因为图片的高度和宽度是独立缩放的。
None: 如果图片小于图片控件，则不执行任何操作。 如果它比图片控件大，则会裁剪图片以适合图片控件，这意味着只有部分图片可见。

 Border

包在控件或者面板外面，可以设置背景色，边框色，厚度，圆角等。

    <Grid Margin="10">
        <Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="2"
                CornerRadius="8,8,2,2">
            <StackPanel Margin="10">
                <Button>Button 1</Button>
                <Button Margin="0,10">Button 2</Button>
                <Button>Button 3</Button>
            </StackPanel>
        </Border>
    </Grid>

 四条边 的BorderThickness也可以分别设置

 

渐变色背景

        <Border BorderBrush="Navy" BorderThickness="1,3,1,5">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="LightCyan" Offset="0.0" />
                    <GradientStop Color="LightBlue" Offset="0.5" />
                    <GradientStop Color="DarkTurquoise" Offset="1.0" />
                </LinearGradientBrush>
            </Border.Background>
            <StackPanel Margin="10">
                <Button>Button 1</Button>
                <Button Margin="0,10">Button 2</Button>
                <Button>Button 3</Button>
            </StackPanel>
        </Border>

 

 

回到顶部

ToolTip

    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
        <Button ToolTip="Click here and something will happen!">Click here!</Button>

    </Grid>

自定义

    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
            <Button ToolTip="Create a new file">
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/page_white.png" Width="16" Height="16" />
                </Button.Content>
            </Button>
            <Button>
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/folder.png" Width="16" Height="16" />
                </Button.Content>
                <Button.ToolTip>
                    <StackPanel>
                        <TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
                        <TextBlock>
                        Search your computer or local network
                        <LineBreak />
                        for a file and open it for editing.
                        </TextBlock>
                        <Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
                        <WrapPanel>
                            <Image Source="/WpfTutorialSamples;component/Images/help.png" Margin="0,0,5,0" />
                            <TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
                        </WrapPanel>
                    </StackPanel>
                </Button.ToolTip>
            </Button>
        </ToolBar>

        <TextBox>
            Editor area...
        </TextBox>
    </DockPanel>

 

 

回到顶部

控制文本渲染选项

        <Label TextOptions.TextFormattingMode="Ideal" FontSize="9">TextFormattingMode.Ideal, small text</Label>
        <Label TextOptions.TextFormattingMode="Display" FontSize="9">TextFormattingMode.Display, small text</Label>

回到顶部

 其他

对于TextBox等设置TabIndex="0"控制tab键访问顺序。

<Button Content="_New"></Button>

 

访问键：按住Alt 和N访问该按钮。

如何通过访问键访问textbox？设置label中 的target

    <StackPanel Margin="20">
        <Label Content="_First name:" Target="{Binding ElementName=txtFirstName}" />
        <TextBox Name="txtFirstName" />
        <Label Content="_Last name:" Target="{Binding ElementName=txtLastName}" />
        <TextBox Name="txtLastName" />
        <Button Content="_Save" Margin="20"></Button>
    </StackPanel>