locked
make this green line more bold RRS feed

  • Question

  • HI I Have a Silverlight app , on the SPending History section, there is a green dotted line which is the average. It is quite light this line and I would like ideas as to how to bolden it.

    THe code for that section is here:

    <!-- green line -->

    <Line x:Name="AvgSpendLine"

    Grid.Column="1"

    X1="211"

    Stretch="None"

    Margin="0, 40, 0, 0"

    VerticalAlignment="Top"

    StrokeDashArray="4.0,2.0" Stroke="#FFA4CE39"

    StrokeThickness="2" />

    Tuesday, June 22, 2010 2:22 PM

All replies

  • Use a darker colour.

    Reduce the gap between strokes and/or increase the width of coloured strokes.

    Increase stroke thickness.

    Tuesday, June 22, 2010 2:27 PM
  • Just modify the stroke properties, sizing, color, and spacing here are some examples

    // Darker

     <Line

    Grid.Column="1"
    X1="211"

    Stretch="None"

    Margin="0,54,0,0"

    VerticalAlignment="Top"
    StrokeDashArray="4.0,2.0"

    Stroke="#FF639919"

    StrokeThickness="2.6" />

     

    // Original color bolder

    <Line

    Grid.Column="1"
    X1="211"

    Stretch="None"

    Margin="0,54,0,0"

    VerticalAlignment="Top"
    StrokeDashArray="4.0,2.0"

    Stroke="#FFA4CE39"

    StrokeThickness="2.4" StrokeDashCap="Square" StrokeEndLineCap="Round" StrokeLineJoin="Bevel" StrokeStartLineCap="Square" />

    Tuesday, June 22, 2010 2:28 PM
  • The green line is much better but the violet line underneath it does not take the changes at all, why is that?

    <!-- violet line -->

    <Line x:Name="AvgPurchLine"

    Grid.Column="1"

    X1="211"

    Stretch="None"

    Margin="0, 54, 0, 0"

    VerticalAlignment="Top"

    StrokeDashArray="4.0.2.0"

    Stroke="#FFB552B4"

    StrokeThickness="4.6" StrokeDashCap="Square" StrokeEndLineCap="Round" StrokeLineJoin="Bevel"

    StrokeStartLineCap="Square" />

    <TextBlock x:Name="AvgSpendText"

    Text="Avg. Spend"

    FontWeight="Bold"

    VerticalAlignment="Top"

    HorizontalAlignment="Right"

    Foreground="#FFA4CE39"

    Margin="0, 4, 4, 0" />

    <!-- green line -->

    <Line x:Name="AvgSpendLine"

    Grid.Column="1"

    X1="211"

    Stretch="None"

    Margin="0, 54, 0, 0"

    VerticalAlignment="Top"

    StrokeDashArray="4.0,2.0"

    Stroke="#FFA4CE39"

    StrokeThickness="3.6" StrokeDashCap="Square" StrokeEndLineCap="Round" StrokeLineJoin="Bevel"

    StrokeStartLineCap="Square" />

    Tuesday, June 22, 2010 3:57 PM
  •  This appears to be buggy, you may want to report something. For some reason the designer isn't updating lines correctly all the time as one would expect. I had to copy the green line, change the color to the purple, then mess with the thickness and other attributes before it stuck to get any kind of good result.

     

    Wednesday, June 23, 2010 12:33 PM
  • Hi TranceFrank,

    I saw from StrokeDashArray="4.0.2.0"  from the violet line, shouldn't it be "4.0,2.0"?

    Thursday, June 24, 2010 1:26 AM
  • Yea.  I really need new contacts.

    Thursday, June 24, 2010 10:55 AM
  • Frank, good eyes there ! but its still not showing the violet line

    code:

    <!-- violet line -->

    <Line x:Name="AvgPurchLine"

    Grid.Column="1"

    X1="211"

    Stretch="None"

    Margin="0, 54, 0, 0"

    VerticalAlignment="Top"

    StrokeDashArray="4.0,2.0"

    Stroke="#FFB552B4"

    StrokeThickness="4.6" StrokeDashCap="Square" StrokeEndLineCap="Round" StrokeLineJoin="Bevel"

    StrokeStartLineCap="Square" />

    <TextBlock x:Name="AvgSpendText"

    Text="Avg. Spend"

    FontWeight="Bold"

    VerticalAlignment="Top"

    HorizontalAlignment="Right"

    Foreground="#FFA4CE39"

    Margin="0, 4, 4, 0" />

    <!-- green line -->

    <Line x:Name="AvgSpendLine"

    Grid.Column="1"

    X1="211"

    Stretch="None"

    Margin="0, 54, 0, 0"

    VerticalAlignment="Top"

    StrokeDashArray="4.0,2.0"

    Stroke="#FFA4CE39"

    StrokeThickness="3.6" StrokeDashCap="Square" StrokeEndLineCap="Round" StrokeLineJoin="Bevel"

    StrokeStartLineCap="Square" />

    Thursday, June 24, 2010 10:57 AM
  •  If I post that exact code inside a new project in a grid both lines show up

    Thursday, June 24, 2010 11:06 AM
  • wow. thanks, so it must be something else.

    Thursday, June 24, 2010 11:45 AM
  • Hi,

    The code also works on my side. Since you put both green line and violet line in the same column, so the green line will hide some part of the violet line....

    I would recommend you using SilverlightSpy to check the actual rendered xaml to find the cause. Thanks.

    Friday, June 25, 2010 2:31 AM
  • Frank, I downloaded the Silverlight Spy, but how do I use it with my particular app? WHich area will provide info on the light line issue?

    Monday, June 28, 2010 3:55 PM
  • Hi,

    Hmmm, you should check the User Interface node, please expand the "StartPage" node under it and then you will find the visual tree representation.

    Tuesday, June 29, 2010 4:57 AM
  •  

    Frank, which part are we interested in for that dotted line issue?

    Tuesday, June 29, 2010 10:33 AM
  • Hi,

    I couldn't tell from the image, you will need to walk through the tree to check. Find the controls which besides it and then narrow it down.

    Check this tutorial by the way:

    http://www.smallworkarounds.net/2010/05/silverlight-spy-must-have-tool-for-any.html

    Wednesday, June 30, 2010 4:59 AM
  • Thank you Frank, this is an excellent link. One thing I am having trouble with is locating the info I need on the Silverlight spy.

    Thursday, July 1, 2010 9:46 AM
  • MAybe this code is in contention?  C:\Documents and Settings\SpendingHistoryChartPanel.xaml

    http://pastebin.com/xWU5c6t5

    Thursday, July 1, 2010 3:15 PM