zoukankan      html  css  js  c++  java
  • TextBloc研究

    常用的TextBlock使用如下:

    <TextBlock Name="textBlock1" TextWrapping="Wrap">
      <Bold>TextBlock</Bold> is designed to be <Italic>lightweight</Italic>,
      and is geared specifically at integrating <Italic>small</Italic> portions
      of flow content into a UI.
    </TextBlock>
    <Button Width="100" Margin="10">Click Me</Button>
    <TextBlock  Name="textBlock2" 
      TextWrapping="Wrap" Background="AntiqueWhite" TextAlignment="Center"
    >
      By default, a TextBlock provides no UI beyond simply displaying its contents.
    </TextBlock>
    <Button Width="100" Margin="10">Click Me</Button>

    显示如下:

    但是当碰到这种需求:

    一个字符窜,分三段组成,第一段一种字体,常量,第二段一种字体,并且需要绑定变量,第三段又是一种字体,常量,,现在需要绑定在一个Textblock上怎么处理呢?

    有三种解决方案:

    第一种:在Textblock赋值前做处理,重新组织这个字符窜,再赋值,或者使用IValueConverter接口,但这种方式比较麻烦。

    第二种: 使用Run

     <TextBlock Grid.Row="0"
                       Margin="0,0,73,8"
                       HorizontalAlignment="Right"
                       VerticalAlignment="Center"
                       DataContext="{Binding RelativeSource={RelativeSource AncestorType=local:MainWindow},
                                             Path=Timer}"
                       Visibility="{Binding Status,
                                            Converter={StaticResource OpVisibilityConverter}}">
                <Run Style="{DynamicResource Run.TimeoutText}" Text="超时倒计时" />
                <Run Style="{DynamicResource Run.TimeoutNumber}" Text="{Binding RemainedSeconds, Mode=OneWay}" />
                <Run Style="{DynamicResource Run.TimeoutText}" Text="秒" />
            </TextBlock>

    第三种:使用AccessText

    <TextBlock Margin="0,0,73,267"
                       DataContext="{Binding RelativeSource={RelativeSource AncestorType=local:MainWindow},
                                             Path=Timer}"
                       Visibility="{Binding Status,
                                            Converter={StaticResource OpVisibilityConverter}}">
                <AccessText Style="{DynamicResource AccessText.TimeoutText}">超时倒计时</AccessText>
                <AccessText Text="{Binding RemainedSeconds, Mode=OneWay}" Style="{DynamicResource AccessText.TimeoutNumber}"></AccessText>
                <AccessText Style="{DynamicResource AccessText.TimeoutText}"></AccessText>
            </TextBlock>


    第二,第三种方法比较推荐,比较清晰,减少了前台复杂的转换处理。

    最后效果如下:

  • 相关阅读:
    我大学时代的好朋友要结婚了!
    (function(root,factory){})(this,function($){}) 一个立即执行的匿名函数自调
    非书面的非官方的常见的HTTP请求状态码分析
    一个页面多个HTTP请求 页面卡顿!
    requestAnimationFrame Web中写动画的另一种选择
    js 点击 返回顶部 动画
    css3动画 一行字鼠标触发 hover 从左到右颜色渐变
    var 和 let 的异同?
    H5案例分享:使用JS判断客户端、浏览器、操作系统类型
    基于浏览器的HTML5地理定位
  • 原文地址:https://www.cnblogs.com/gavinhuang/p/3546085.html
Copyright © 2011-2022 走看看