Windows phone 之常用控件

时间：2024-07-23 10:05:50

一、TextBox

TextBox 显示和编辑单格式、多行文本的控件

将TextWrapping的特性设置为Wrap会使文本在到达TextBox控件的边缘时换至新行。必要时会自动扩展TextBox以便为新行留出空间

将AcceptReturn特性设置为true会导致在按换行键时插入新行，必要时会再次自动扩展TextBox以便为新行留出空间。

文本框的大小固定时，内容过多就需要添加滚动条来显示全部的内容了。

设置 HorizontalScrollBarVisibility 属性用以启动水平滚动条

设置 VerticalScrollBarVisibility 属性用以启动垂直滚动条

<phone:PhoneApplicationPage.Resources>
        <ResourceDictionary>
            <!--设置TextBox的样式-->
            <Style x:Key="TextBoxStyle1" TargetType="TextBox">
                <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
                <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
                <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
                <Setter Property="Foreground" Value="Blue"/>
                <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
                <Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
                <Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
                <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
                <Setter Property="Padding" Value="2"/>
            </Style>
        </ResourceDictionary>
    </phone:PhoneApplicationPage.Resources>
<!--创建一个自动折行并使用上面定义的TextBoxStyle1样式资源的控件-->
            <TextBox Style="{StaticResource TextBoxStyle1}" Margin="12,31,22,473" Name="TextBox1" TextWrapping="Wrap"   HorizontalScrollBarVisibility="Disabled" AcceptsReturn ="true"  TextChanged="TextBox1_TextChanged"/>
            <TextBlock Height="60" HorizontalAlignment="Left" Margin="12,221,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" Width="364" />
            <TextBlock Height="43" HorizontalAlignment="Left" Margin="12,172,0,0" Name="textBlock2" Text="获取TextBox的输入:" VerticalAlignment="Top" Width="170" />

二、TextBlock

<!--创建一个简单的TextBlock控件-->
            <TextBlock x:Name="TextBlock2" Height="30" Text="你好，我是TextBlock控件" Foreground="Red" Margin="25,84,177,493">
            </TextBlock>
            <!--给同一个TextBlock控件的文字内容设置多种不同的样式-->
            <TextBlock Margin="25,171,19,384">
            <TextBlock.Inlines>
                <Run  FontWeight="Bold" FontSize="14" Text="TextBlock. " />
                <Run FontStyle="Italic" Foreground="Red" Text="red text. " />
                <Run FontStyle="Italic" FontSize="18" Text="linear gradient text. ">
                    <Run.Foreground>
                        <LinearGradientBrush>
                            <GradientStop Color="Green" Offset="0.0" />
                            <GradientStop Color="Purple" Offset="0.25" />
                            <GradientStop Color="Orange" Offset="0.5" />
                            <GradientStop Color="Blue" Offset="0.75" />
                        </LinearGradientBrush>
                    </Run.Foreground>
                </Run>
                <Run FontStyle="Italic" Foreground="Green" Text=" green " />
            </TextBlock.Inlines>
          </TextBlock>
            <!--自定义断行-->
            <TextBlock Margin="9,344,230,130">
            你好!
            <LineBreak/>
            我是TextBlock
            <LineBreak/>
            再见
            <LineBreak/>
            --2011年6月8日
            </TextBlock>
            <!--设置TextBlock自动折行-->
            <TextBlock TextWrapping="Wrap" Margin="279,344,19,154">
    好像内容太长长长长长长长长长长长长长长长长长长了
            </TextBlock>
            <!--不设置自动折行-->
            <TextBlock  Margin="248,477,50,77">
    好像内容太长长长长长长长长长长长长长长长长长长了
            </TextBlock>
            <!--设置TextBlock控件内容的颜色渐变-->
            <TextBlock Text="颜色变变变变变变"   Margin="25,519,109,21">
            <TextBlock.Foreground>
                <LinearGradientBrush>
                    <GradientStop Color="#FF0000FF" Offset="0.0" />
                    <GradientStop Color="#FFEEEEEE" Offset="1.0" />
                </LinearGradientBrush>
            </TextBlock.Foreground>
            </TextBlock>

FontFamily：字体名称

FontStyle:字体样式

Width：文字区块宽度，可以赋值数字。

Height：文字区块高度，可以赋值数字。

FontWeight:thin extrallight light  normal medium semibold bold extrabold black extrablack

Opacity：文字透明度，赋值为0—1.0

TextWrapping：wrap ，nowrap，wrapwithoverflow

TextBlock是没有Background这个属性的，其实这个现象也说明了一个问题，为了Windows Phone App应用的美观和统一几乎不会需要设置TextBlock的背景。
当然，如果非要设置，还是可以的，比如你可以将TextBlock控件放到一个Grid里面，控制Grid和TextBlock的Height，Width属性相同。这样可以通过设置 Grid元素的背景颜色达到修改TextBlock背景的目的。

<Grid Width="200" Height="200">
                <Grid.Background>
                    <ImageBrush ImageSource="/Image/1.png"></ImageBrush>
                </Grid.Background>
                <TextBlock Width="200" Height="200" Name="text1" Text="aa">
                   <TextBlock.Foreground>
                       <ImageBrush ImageSource="/1.jpg"></ImageBrush>
                   </TextBlock.Foreground>
                </TextBlock>
            </Grid>

三、Button

<!--使用按钮点击事件-->
            <Button Name="button1" Click="button1_Click" Height="72" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="46,47,0,0">事件</Button>
            <!--设置按钮的样式:注意未指定按钮高和宽时，HorizontalAlignment和VerticalAlignment的作用 -->
            <Button Name="button2"
                    Content="样式2"
                    FontSize="48"
                    FontFamily="Arial Black"
                    FontStyle="Italic"
                    BorderBrush="Blue"
                    BorderThickness="10"
                    Background="Red"
                    Foreground="Yellow"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    ></Button>
            <!--图片按钮-->
            <Button   Width="200" Height="200"  HorizontalAlignment="Center"  VerticalAlignment="Center" Margin="61,471,195,97">
                <Image  Stretch="Fill" Height="176"  Width="151" Source="/1.png"></Image>
            </Button>

当然，也可以这么写：

 <!--图片按钮-->
            <Button   Width="200" Height="200"  HorizontalAlignment="Center"  VerticalAlignment="Center" Margin="61,471,195,97">
                <StackPanel>
                <Image  Stretch="Fill" Height="176"  Width="151" Source="/1.png"></Image>
                </StackPanel>
            </Button>

另外，关于按钮的触发事件。

//当然，也可以指定，按钮触发的条件。
        //button有三种状态。press hover release
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            button1.ClickMode = ClickMode.Press;

            MessageBox.Show("测试触发状态1！");
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            button2.ClickMode = ClickMode.Hover;
            MessageBox.Show("测试触发状态2！");
        }

        private void button3_Click(object sender, RoutedEventArgs e)
        {
            button3.ClickMode = ClickMode.Release;
            MessageBox.Show("测试触发状态3！");
        }

不过，，，，感觉不到差别。。。。。。不懂。。。

相关文章