先展示一下控件效果:

这个TextBox通过重写控件模板,实现了边框的消除,平时看起来就像TextBlock,和背景融为一体,点击的时候就可以编辑文字。

xaml代码如下:

<ControlTemplate TargetType="TextBox">
    <Grid x:Name="RootElement">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver"/>
                <VisualState x:Name="Disabled"/>
                <VisualState x:Name="ReadOnly"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetName="Border"
                            Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="#5EC9C9C9"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetName="Border"
                            Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ValidationStates">
                <VisualState x:Name="Valid"/>
                <VisualState x:Name="InvalidUnfocused"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="Border" BorderThickness="0">
            <Grid>
                <ScrollViewer x:Name="ContentElement" Margin="10 0"
                                   HorizontalAlignment="Left" VerticalAlignment="Center"
                                   BorderThickness="0" IsTabStop="False"/>
            </Grid>
        </Border>
    </Grid>
</ControlTemplate>

最后说一下一般情况下改变WP7控件外观的步骤,就是先拿到该控件的原始ControlTemplate,方法一是用Express Blend获取,方法二是到Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design\System.Windows.xaml文件中去找。拿到控件原始定义的ControlTemplate之后,就可以根据自己的需要改了。

» 转载请注明来源及链接:未来代码研究所

Related Posts:

Leave a Reply

World Line
Time Machine
Friendly Links
Online Tools