locked
SL3 Margins --not-- like CSS? RRS feed

  • Question

  • Style Declarations: 

    1    <!-- XAML Header Text Style-->
    2    <Style x:Key="Header1TextStyle" TargetType="TextBlock">
    3        <Setter Property="Margin" Value="0,0,0,10" />
    4    </Style>
    5    
    6    <!-- XAML Content Text Style -->
    7    <Style x:Key="ContentTextStyle" TargetType="TextBlock">
    8    	<Setter Property="TextWrapping" Value="Wrap"/>    
    9        <Setter Property="Margin" Value="0,0,0,10"/>
    10   </Style>
    
     
    Style Usage: 
    1    <Grid x:Name="LayoutRoot">
    2    
    3        <TextBlock x:Name="HeaderText"
    4                   Style="{StaticResource Header1TextStyle}"
    5                   Text="Example: Header Text" />
    6    
    7        <TextBlock x:Name="ContentText"
    8                   Style="{StaticResource ContentTextStyle}"
    9                   Text="Example: Content Text" />
    10   </Grid>
    

    When the page runs there is no margin applied to the bottom of the HeaderText TextBlock. The text from the ContextText TextBlock is displayed over the top of the text of the HeaderText TextBlock as if there were no margin setting on the Header1TextStyle as the Style declarations show.

    When using CSS I'm in the habit of using a margin on the bottom of containers so when container elements in a page stack on top of one another there is white space separating the "paragraphs." I thought this would work in XAML too. I also do not understand how we are supposed to make paragraphs when using two or more TextBlocks that follow one another in a Grid like shown.

    I know there are no rows or other containers defined in the usage example. Could this be why there is no white-space between the bottom of one TextBlock and the top of the next TextBlock? 

    If there are rows or other containers --required-- in a Grid or any other container type that contains multiple objects I still do not understand how to make paragraphs with white space the way we would in HTML or CSS using <p/> or <br/> in HTML.

    Sunday, January 17, 2010 7:59 PM

Answers

  • One suggestion is to use a Grid with two rows.

     

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock x:Name="HeaderText"
                       Style="{StaticResource Header1TextStyle}"
                       Text="Example: Header Text" />
    
            <TextBlock x:Name="ContentText"
                       Grid.Row="1"
                       Style="{StaticResource ContentTextStyle}"
                       Text="Example: Content Text" />
        </Grid>
     
    Sunday, January 17, 2010 8:04 PM
  • You can used the basedon keyword to build up groups of styles.

    Additionally, by targetting these styles directly at controls you can ensure every control of that type will have this style applied without having to explicitly set Style={StaticRes...} on every control.

    BasedOn:
    http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2009/03/18/Silverlight-3-_1320_-BasedOn-Styles.aspx

    How to use them as default styles:
    http://betaforums.silverlight.net/forums/p/155672/349794.aspx

    Tuesday, January 19, 2010 3:58 AM
  • Okay I understand but are you helping me learn that the only way to make paragraphs in a large collection of text that would otherwise be formatted using <p /> elements likely styled with CSS margins to manage whitespace literally requires a separate TextBlock for each paragraph?

    It's actually more like a <div>, but there isn't a real great way to make paragraphs in Silverlight 3. You can use <Run> and <LineBreak> inside a TextBlock but that is more like a <br/>. In Silverlight 4 there is a RichTextArea which is a better option for doing paragraphs.

    Tuesday, January 19, 2010 7:00 AM

All replies

  • One suggestion is to use a Grid with two rows.

     

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock x:Name="HeaderText"
                       Style="{StaticResource Header1TextStyle}"
                       Text="Example: Header Text" />
    
            <TextBlock x:Name="ContentText"
                       Grid.Row="1"
                       Style="{StaticResource ContentTextStyle}"
                       Text="Example: Content Text" />
        </Grid>
     
    Sunday, January 17, 2010 8:04 PM
  • Thank you your comments fury. I tried that XAML you suggest but this Navigation app won't run until I learn more about this p.o.s. Silverlight and meaningless error message and I haven't even written one line of code yet thinking I could learn something about Silverlight by using the XAML ti learn stylesheets with a TextBlock or two before moving on. They call this Silverlight 3?

    AG_E_UNKNOWN_ERROR

    Monday, January 18, 2010 10:39 AM
  • Maybe use some of the getting started resources to get up to speed.

    SL definitely isn't CSS.

    Layouts would be a good place to start as that's where you seem to be having troubles.

    http://timheuer.com/blog/articles/silverlight-get-started-part-2-defining-layout.aspx

    Monday, January 18, 2010 11:00 AM
  • I grok that XAML is not CSS but the objective to style using properties is the same objective. I'm using Blend3 and VStudio2008 and have been following Heur and other notables but SL3 is FUBAR if there is no way to debug this stupid error message.

    Another big surprise was to just learn XAML declarations are parsed "forward only" as the docs state but even reordering the declarations does not resolve the error NOBODY knows anything about.

    I mean how are we supposed to debug this hocus pocus?

     

    Monday, January 18, 2010 2:11 PM
  • I remember reading that SL4 is meant to have much better support for parsing errors. Or maybe I just read that it was something we were all screaming for.

    Not sure if you've heard of resharper (www.jetbrains.com) but this helps pinpoint issues in xaml that the compiler just doesn't inform you about. Yes, I know it costs money but well worth the cost in increased productivity etc bla bla...

    Monday, January 18, 2010 3:13 PM
  • In a Grid, elements in the same row will overlap and don't make space for each other. If you put those TextBlocks inside a StackPanel you'll get the results you expect.

    Monday, January 18, 2010 4:53 PM
  • In a Grid, elements in the same row will overlap and don't make space for each other. If you put those TextBlocks inside a StackPanel you'll get the results you expect.

    Okay I understand but are you helping me learn that the only way to make paragraphs in a large collection of text that would otherwise be formatted using <p /> elements likely styled with CSS margins to manage whitespace literally requires a separate TextBlock for each paragraph?

    Monday, January 18, 2010 11:58 PM

  • <snip />
    Not sure if you've heard of resharper (http://www.jetbrains.com/) but this helps pinpoint issues in xaml that the compiler just doesn't inform you about. Yes, I know it costs money but well worth the cost in increased productivity etc bla bla...



    Oh happy day! I just obtained ReSharper 4 but do not know how to use it this way yet. I'll try to check this aspect of use noting any direction is welcome.

    Secondly, Tim Heuer got me into trouble in this mess in the first place ;-) I started this first Silverligt project using his frostedcinnamontoast theme he styled based on a Navigation Project [1]. I delved in thinking I should learn the XAML and a means to create orderly and well though out "Resource Dictionaries" after the years of messy CSS we have been working with.

    To my surprise I learn XAML is even messier %-D as I learn in these MSDN docs [2] when learning:

    Forward References Within a ResourceDictionary 
    Static resource references from within any given resource dictionary must reference a resource that 
    has already been defined lexically before the resource reference. Forward references cannot be
    resolved by a static resource reference. For this reason, if you use static resource references,
    you must design your resource dictionary structure such that resources intended for further by-resource
    use are defined at or near the beginning of each respective resource dictionary.

    Convoluted as that documentation is as writtern, if I understand it correctly it forbids creating an orderly section of text declarations in my XAML I can use to group together the declaration of properties like FontFamilies, Brushes and so on that are then referenced as StaticResource(s) by other Styles. This may sounf a bit confusing but note: I am referring to the XAML file as a text file here in the same sense as a .css file and how we were motiavted to group our declarations for related styles in sections of the text file so we wouldn't have to scroll all over the damn place when looking to change a Font Family or whatever. 

    This "forward only" suggests the declaration of the properties can only be referenced as StaticResources if the declarations are parsed before something else and what that means to me is still not really well understood yet.

    [1] http://gallery.expression.microsoft.com/en-us/frostedriatheme

    [2] http://msdn.microsoft.com/en-us/library/cc903952(VS.95).aspx

    Tuesday, January 19, 2010 12:19 AM
  • You can used the basedon keyword to build up groups of styles.

    Additionally, by targetting these styles directly at controls you can ensure every control of that type will have this style applied without having to explicitly set Style={StaticRes...} on every control.

    BasedOn:
    http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2009/03/18/Silverlight-3-_1320_-BasedOn-Styles.aspx

    How to use them as default styles:
    http://betaforums.silverlight.net/forums/p/155672/349794.aspx

    Tuesday, January 19, 2010 3:58 AM
  • Okay I understand but are you helping me learn that the only way to make paragraphs in a large collection of text that would otherwise be formatted using <p /> elements likely styled with CSS margins to manage whitespace literally requires a separate TextBlock for each paragraph?

    It's actually more like a <div>, but there isn't a real great way to make paragraphs in Silverlight 3. You can use <Run> and <LineBreak> inside a TextBlock but that is more like a <br/>. In Silverlight 4 there is a RichTextArea which is a better option for doing paragraphs.

    Tuesday, January 19, 2010 7:00 AM
  • WTF? 2-3 days of trying to determine why I am getting AG_E_UNKNOWN_ERROR and what finally turns up? Look at the  XAML Header Text Style declaration I have been discussing and what do you see?

    1    <!-- XAML Header Text Style-->
    2    <Style x:Key="Header1TextStyle" TargetType="TextBlock">
    3        <Setter Property="Margin" Value="0,0,0,10" />
    4    </Style>
    5    
    

     On a hunch here's what I look up in documentation...

    XAML GRAMMAR
    1    XamlName ::= NameStartChar (NameChar)*
    2    NameStartChar ::= LetterCharacter | '_'
    3    NameChar ::= NameStartChar | DecimalDigit
    4    LetterCharacter ::= ('a'-'z') | ('A''Z')
    5    DecimalDigit ::= '0'-'9'
    6    CombiningCharacter::= none

    WTF XAML DOES NOT SUPPORT NAMING CONVENTIONS THE FRAMEWORK HAS SUPPORTED FOR YEARS?

    DISALLOWED: Header1TextStyle (The "combined" character 1 is not a string anymore?) I rename to HeaderOneTextStyle and no more errors!

    Tuesday, January 19, 2010 10:00 PM