單行簿,在上小學,初中的時候,相信我們都用過,那我們在讓使用者輸入內容的,如文字框,也能做出這種格式嗎?
對了,新浪微博Win8用戶端,在發表新微博的時候,輸入框也是這樣的效果,看看下面的圖。
新浪微博這個輸入控制項,是先把TextBox的背景設定為{x:Null},然後在TextBox下面放一個Image控制項,再引用一張圖片來實現的。
而我的做法也差不多,只是在TextBox下面放的不是圖片,而是一個Grid元素,Grid分為幾行,而每一行放一個高度為1的矩形,看起來就像一根直線,同樣,也做出了這種效果。請看。
怎麼樣?還過得去吧,雖然不是什麼高技術含量,但還是初步實現了類似單行簿的輸入介面。
方法倒不複雜,首先,用一個使用者控制項,把這些東西排版好。
<UserControl x:Class="App1.ucxaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Width="450" Height="270"> <UserControl.Resources> <Style x:Key="lineStyle" TargetType="Rectangle"> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="Fill" Value="Red"/> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="Height" Value="1"/> <Setter Property="Opacity" Value="0.6"/> </Style> <Style x:Key="txtStyle" TargetType="TextBox"> <Setter Property="Background" Value="{x:Null}"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="FontSize" Value="28"/> <Setter Property="TextWrapping" Value="Wrap"/> </Style> </UserControl.Resources> <Grid Background="LightGray"> <Grid Canvas.ZIndex="0"> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="38"/> <RowDefinition Height="38"/> <RowDefinition Height="38"/> <RowDefinition Height="38"/> </Grid.RowDefinitions> <Rectangle Grid.Row="0" Style="{StaticResource lineStyle}"/> <Rectangle Grid.Row="1" Style="{StaticResource lineStyle}"/> <Rectangle Grid.Row="2" Style="{StaticResource lineStyle}"/> <Rectangle Grid.Row="3" Style="{StaticResource lineStyle}"/> <Rectangle Grid.Row="4" Style="{StaticResource lineStyle}"/> </Grid> <TextBox Name="txt" Canvas.ZIndex="1" Style="{StaticResource txtStyle}" MaxLength="120"/> </Grid></UserControl>
對於行的高度如何與TextBox中的文本配合,我們就不斷地調,直到看起來差不多就行了,就是協調TextBox中的字型大小和Grid的行高。
然後,我們在其他頁面中引用這個使用者控制項就行了。
<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <local:ucxaml /> </Grid></Page>
這是一個笨方法,讓各位見笑了,呵呵,如果你覺得有用,就研究一下,如果你想到更強大的方法,你就不用看了。哈!