locked
How to display some text in Lightswitch using non-proportional font? RRS feed

  • Question

  • Simple question, I wish to display some text (e.g. a raw data file) on screen using non-proportional font (like courier). What is the simple method?

    Monday, April 15, 2013 3:49 AM

Answers

  • It's not really "simple", but you should find what you're looking for in this thread:

    How to change the font size of a label control programmatically?

    Except you'd be changing the font itself, rather than the font size.


    Yann - LightSwitch Central
    Luminous Tools for LightSwitch (a FREE productivity extension)
    FREE Themes, Controls, Types and Commands
     
    Please click "Mark as Answer", if any reply answers your question.
    Please click "Vote as Helpful", if you find any reply helpful.
     
    By doing this you'll help others to find answers faster.

    • Marked as answer by Jansen Lam CS Monday, April 15, 2013 9:10 AM
    Monday, April 15, 2013 7:32 AM
    Moderator
  • Well, looking at the screenshot, it's obvious that in that particular font (& the others that you've tried) the Chinese characters aren't exactly the width of two normal characters, whereas in the build output they are. That's what's causing the words to be out of alignment.

    I'd say that whoever created the Chinese characters haven't bothered to make them the proper fixed width. Is there even such a concept as "fixed width" for Chinese characters?

    My output window isn't using the same font as yours is in your screenshot. It appears to be using some type of serif font (maybe), so did you change the font yourself? If so I'd be willing to bet that if you use the same font for your text, that the text will appear the way you want.

    I think you just need to find a font where the Chinese characters are spaced correctly. You could also test this by using one of the fonts that don't work right in the text box for the output window font.


    Yann - LightSwitch Central
    Luminous Tools for LightSwitch (a FREE productivity extension)
    FREE Themes, Controls, Types and Commands
     
    Please click "Mark as Answer", if any reply answers your question.
    Please click "Vote as Helpful", if you find any reply helpful.
     
    By doing this you'll help others to find answers faster.

    • Marked as answer by Jansen Lam CS Tuesday, April 16, 2013 12:39 AM
    Monday, April 15, 2013 10:27 AM
    Moderator

All replies

  • It's not really "simple", but you should find what you're looking for in this thread:

    How to change the font size of a label control programmatically?

    Except you'd be changing the font itself, rather than the font size.


    Yann - LightSwitch Central
    Luminous Tools for LightSwitch (a FREE productivity extension)
    FREE Themes, Controls, Types and Commands
     
    Please click "Mark as Answer", if any reply answers your question.
    Please click "Vote as Helpful", if you find any reply helpful.
     
    By doing this you'll help others to find answers faster.

    • Marked as answer by Jansen Lam CS Monday, April 15, 2013 9:10 AM
    Monday, April 15, 2013 7:32 AM
    Moderator
  • Thanks Yann, the solution is working.

    The text box are now filled with fixed width characters. However, if the text contains some Chinese characters, the width of white spaces followed that Chinese characters are narrower, and the width of that Chinese characters are not equal to 2 Alpha characters. (the text display in output window is displayed correctly).

    Any idea?

    Jansen


    Monday, April 15, 2013 9:18 AM
  • Are you sure that your specified font is actually being used (I guess it is because you say "now filled with fixed width characters", but I just wanted to check)? If the font you specify can't be found, then the font will default back to something "similar".

    I don't really know anything about how Chinese characters are displayed, sorry. Perhaps a "quirk" of the font you're using?


    Yann - LightSwitch Central
    Luminous Tools for LightSwitch (a FREE productivity extension)
    FREE Themes, Controls, Types and Commands
     
    Please click "Mark as Answer", if any reply answers your question.
    Please click "Vote as Helpful", if you find any reply helpful.
     
    By doing this you'll help others to find answers faster.

    Monday, April 15, 2013 9:43 AM
    Moderator
  • Here is the screen shot:

    Screenshot

    The font is actually being used (I've tried "Courier New", "monospace" and a Fixed width Chinese font). The font is changed but the effect are the same when displaying in the text box.

    If I copy the text in the text box and paste to my editor, everything normal.

    If the text contains no Chinese Characters, everything normal.

    Any idea?

    Jansen



    • Edited by Yann DuranModerator Monday, April 15, 2013 10:18 AM Made link clickable & added link text
    Monday, April 15, 2013 10:02 AM
  • Well, looking at the screenshot, it's obvious that in that particular font (& the others that you've tried) the Chinese characters aren't exactly the width of two normal characters, whereas in the build output they are. That's what's causing the words to be out of alignment.

    I'd say that whoever created the Chinese characters haven't bothered to make them the proper fixed width. Is there even such a concept as "fixed width" for Chinese characters?

    My output window isn't using the same font as yours is in your screenshot. It appears to be using some type of serif font (maybe), so did you change the font yourself? If so I'd be willing to bet that if you use the same font for your text, that the text will appear the way you want.

    I think you just need to find a font where the Chinese characters are spaced correctly. You could also test this by using one of the fonts that don't work right in the text box for the output window font.


    Yann - LightSwitch Central
    Luminous Tools for LightSwitch (a FREE productivity extension)
    FREE Themes, Controls, Types and Commands
     
    Please click "Mark as Answer", if any reply answers your question.
    Please click "Vote as Helpful", if you find any reply helpful.
     
    By doing this you'll help others to find answers faster.

    • Marked as answer by Jansen Lam CS Tuesday, April 16, 2013 12:39 AM
    Monday, April 15, 2013 10:27 AM
    Moderator
  • Yann, you are correct. Font is matter.

    I've tried all the fixed-width fonts that I have. All of them align properly in output window but only a few of them displayed right in text box.

    These fonts displayed correctly:  SimHei, MingLiU, NSimsun

    These fonts are not: Courier New, Consolas, Lucida Console, 細明體, 新細明體

    Thanks for your help.

    Jansen

    Tuesday, April 16, 2013 12:44 AM
  • You're welcome Jansen. I'm glad we got to the bottom of it. :-)

    Yann - LightSwitch Central
    Luminous Tools for LightSwitch (a FREE productivity extension)
    FREE Themes, Controls, Types and Commands
     
    Please click "Mark as Answer", if any reply answers your question.
    Please click "Vote as Helpful", if you find any reply helpful.
     
    By doing this you'll help others to find answers faster.

    Tuesday, April 16, 2013 2:18 AM
    Moderator
  • @Yann

    I copied the code in the link you provided above but for us VB noobs there was a critical piece of information missing...  where does the code go?  Sorry for my noobness.

    Ed

    Tuesday, April 23, 2013 12:00 PM
  • Hi Ed,

    While probably not available, the example DID actually show where to put it, in the screen's InitializeDataWorkspace method.

    But that's actually NOT the correct place to put ANY code that include FindControl. This type of code should go in the screen's Created method, where you're then guaranteed that the screens' controls have actually been created. It works "sometimes" in the InitializeDataWorkspace method, depending on various timing issues. But to ensure that the code will ALWAYS find controls, make sure you put any FindControl code in the screen's Created method.

    So the code would look like this:

    'you can do it all in one place, by using a lambda method
    Private Sub SomeScreenName_Created()
        Dim controlProxy = Me.FindControl("SomeControlName")
           AddHandler controlProxy.ControlAvailable, _
               Sub(sender As Object, e As ControlAvailableEventArgs)
                   Dim control = CType(e.Control, TextBlock)
                       With control
                           'these are some properties you could change for the TextBlock
                           .Foreground = New SolidColorBrush(Color.FromArgb(200, 0, 126, 230))
                           .FontSize = Convert.ToDouble(14.0)
                           .FontFamily = New FontFamily("Tahoma")
                       End With
               End Sub)
    End Sub
    
    'or you can do it with a separate handler method
    Private Sub SomeScreenName_Created()
        Dim controlProxy = Me.FindControl("SomeControlName")
            AddHandler controlProxy.ControlAvailable, AddressOf FontHandler
    End Sub
    
    Private Sub FontHandler(sender as object,  e as ControlAvailableEventArgs)
        Dim control = CType(e.Control, TextBlock)
        With control
            'these are some properties you could change for the TextBlock
            .Foreground = New SolidColorBrush(Color.FromArgb(200, 0, 126, 230))
            .FontSize = Convert.ToDouble(14.0)
            .FontFamily = New FontFamily("Tahoma")
        End With
    End Sub
    I hope that helps Ed.

    Yann Duran
         - Co-Author of Pro Visual Studio LightSwitch 2011
         - Author of the  LightSwitch Central Blog

    FREE Download: Luminous Tools for LightSwitch
    (a Visual Studio productivity extension for LightSwitch)
     
    Click Mark as Answer, if someone's reply answers your question
    Click  Vote as Helpful, if someone's reply is helpful
     
    By doing this you'll help everyone find answers faster.


    • Edited by Yann DuranModerator Tuesday, April 30, 2013 3:47 AM Replaced GetControl with FindControl (see explanation below)
    Tuesday, April 23, 2013 4:37 PM
    Moderator
  • Crisp, clean and concise... as always.

    Thanks Yann...  :)

    Tuesday, April 23, 2013 11:51 PM
  • @Yann...  did you mean Me.FindControl("some  control name")?    
    Monday, April 29, 2013 10:02 AM
  • Ahhh, you caught me, lol.

    Yes, you would have to use FindControl. I created an extension method for myself called GetControl. Why? Because FindControl throws an exception if the control isn't found. My GetControl method doesn't throw an exception, it simply returns null (nothing) if the control isn't found.

    Sorry about that. GetControl's an exact replacement for FindControl, & I'm so used to using it, that I forgot that it was an extension method that I created myself. I'll fix the code that I posted above, so as not to confuse anyone else.


    Yann Duran
         - Co-Author of Pro Visual Studio LightSwitch 2011
         - Author of the  LightSwitch Central Blog

    FREE Download: Luminous Tools for LightSwitch
    (a Visual Studio productivity extension for LightSwitch)
     
    Click Mark as Answer, if someone's reply answers your question
    Click  Vote as Helpful, if someone's reply is helpful
     
    By doing this you'll help everyone find answers faster.

    Tuesday, April 30, 2013 3:46 AM
    Moderator
  • @Yann

    I'm curious... when would the targeted control of a FindControl not be found?  Can controls be created programmatically?

      

    Tuesday, April 30, 2013 11:39 AM
  • Because FindControl takes a string argument, that's supposed to have the correct name of an existing control, something as small as a spelling mistake, or the control being renamed, can result in the control not being "found".

    Methods that require string arguments are passed what are often referred to as "magic strings", & it's best practice to avoid them wherever possible. However it's the only way we can access a control in LightSwitch that we don't already have a reference to.

    But, in fact I actually developed FindControl for some other of my extension methods to consume.

    It's quite a common pattern for a method to return null (nothing) if the desired object can't be returned. In this regard, FindControl is an exception to the best practice rule, & requires a different (& IMO more "clumsy") way of using it.

    For example, which of these two snippets is easier to use (& even more importantly able to be followed & understood?

    Private Sub
        Dim x = GetControl("SomeControlName")
        If (x Is Nothing) Then Return
    
        'continue on, as x has a value
    End Sub

    or

    Private Sub
        Try
            Dim x = FindControl("SomeControlName")
    
        Catch ex As Exception
            'x wasn't found
            Return
        End Try
    
        'continue on, as x has a value
    End Sub

    Yes, this is a bit of a contrived example (as code sample snippets usually are), but I'm sure you'll get the point.

    The other reason that I now use GetControl, instead of FindControl, is because I don't have to write that Try/Catch code over & over in the code of any screen that would traditionally use FindControl.

    Make sense?


    Yann Duran
         - Co-Author of Pro Visual Studio LightSwitch 2011
         - Author of the  LightSwitch Central Blog

    FREE Download: Luminous Tools for LightSwitch
    (a Visual Studio productivity extension for LightSwitch)
     
    Click Mark as Answer, if someone's reply answers your question
    Click  Vote as Helpful, if someone's reply is helpful
     
    By doing this you'll help everyone find answers faster.


    Tuesday, April 30, 2013 12:10 PM
    Moderator
  • Yes... thank you.

    Wednesday, May 1, 2013 10:07 AM
  • You're welcome.

    Yann Duran
         - Co-Author of Pro Visual Studio LightSwitch 2011
         - Author of the  LightSwitch Central Blog

    FREE Download: Luminous Tools for LightSwitch
    (a Visual Studio productivity extension for LightSwitch)
     
    Click Mark as Answer, if someone's reply answers your question
    Click  Vote as Helpful, if someone's reply is helpful
     
    By doing this you'll help everyone find answers faster.

    Friday, May 10, 2013 11:04 AM
    Moderator