Question

EDIT:
I had hex value(string) that i converted to a Brush hence it did not take my color the following like takes my colors succesfully:

(Color)ColorConverter.ConvertFromString(colorArray[0])

The only problem remaining is the scaling (with colors).

My color bars seem to be transparent (once again) but now with the proper color attached to each bar. Also at start up of my program all the 6 bars displayed (but they should not get displayed because it has no value yet).

Code:

<Border Height="30" Margin="15" Grid.RowSpan="6" >
                <Border.Background>
                    <LinearGradientBrush StartPoint="0.0,0" EndPoint="1.0,0">
                        <GradientStopCollection>
                            <GradientStop Offset="0.0" Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}" />

                            <GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}" />

                        </GradientStopCollection>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>

How exactly do i get rid of the transparent color fading at the middle/end of the bar?

When i try adding the same color to the second Offset i am getting Full length bars (100%) and the scaling is nullified again.

---

On a sudden there is also a left empty part of the control. When the control is not turned 180 degrees this behavior is not happening at all!

I have a ItemsControl that uses a DataTemplate so the items get shown as rectangles.
The itemsControl is also turned around so the rectangles show in the right direction.

<DataTemplate x:Key="GrafiekItemTemplate">
            <Border Width="Auto" Height="Auto">
                <Grid>
                    <Rectangle StrokeThickness="0" Height="30"  
                               Margin="15" 
                               HorizontalAlignment="Right" 
                               VerticalAlignment="Bottom"
                               Width="{Binding Value, UpdateSourceTrigger=PropertyChanged}" 
                               Fill="{Binding Fill, UpdateSourceTrigger=PropertyChanged}">
                        <Rectangle.LayoutTransform>
                            <ScaleTransform ScaleX="20" />
                        </Rectangle.LayoutTransform>
                    </Rectangle>
                </Grid>
            </Border>
        </DataTemplate>

      <ItemsControl x:Name="icGrafiek"  
            Margin="-484,3,0,0" 
            ItemsSource="{Binding Source={StaticResource Grafiek}}"
            ItemTemplate="{DynamicResource GrafiekItemTemplate}" 
            RenderTransformOrigin="1,0.5" Grid.RowSpan="6">
            <ItemsControl.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1" ScaleX="1"/>
                    <SkewTransform AngleY="0" AngleX="0"/>
                    <RotateTransform Angle="180"/>
                    <TranslateTransform/>
                </TransformGroup>
            </ItemsControl.RenderTransform>
        </ItemsControl>

The binding Fill give the size of those bars (rectangles).

The itemsControl itself is placed inside a Grid with 2 columns and 6 rows.
I have set the control its rowspan to 6 and the columnspan to 1.

What i want to achieve:

The largest value of the itemsControl should take the entire length of the second column of the grid. Currently i am doing some calculations (this returns a list with values) to pass to the Fill binding and i multiply this result by for example 100 or 1000. But that is hard coded which i want to avoid.

How can i make sure these lengths are dynamically instead of filling them up with a value that i multiply with 2000 to fill my screen. For example the size of a 2nd column in a Grid.

I also have Blend available to work with the layout of this.

Answer 1

1) don’t use rectangle, a Border is enough (Borders have a fill), and Borders have content.
2) use normalized value in your binding NValue = Value/MaxValue (between 0.0 and 1.0)
3) you can achieve what you want in two ways :
1) with a grid in your DataTemplate with two columns.
The first Column Width is bound to NormalizedValue (unit is stars (*)) and the other one
to (1-NormalizedValue) (unit is stars also (*)).
Have your ViewModel return you SWNVAlue = NValue as a star width (new GridLength(NValue,GridUnitType.Star)) or write a converter to have a star width from a double.

2) with a Border filling all the space, and a gradientBrush that stop at normalized Value :

    <Border.Background>
         <LinearGradientBrush StartPoint="0,0" EndPoint="1.0,0">
          <GradientStopCollection>
                 <GradientStop Offset="0.0" Color="#fff" />
                 <GradientStop Offset="{Binding NormalizedValue}" Color="#fff" />
                 <GradientStop Offset="{Binding NormalizedValue}" Color="#000" />
                 <GradientStop Offset="1" Color="#000" />
          </GradientStopCollection>
         </LinearGradientBrush>
    </Border.Background>

(example makes white rectangles on a blak background.)
4) you don’t need to rotate/flip. Use (1-NValue) instead of NValue, or left align, or…
but you don’t need to :=)

Edit : if you need to have your ‘rectangles’ all aligned on the right, and starting
at a different X, for example with the GradientStopCollection way, just use (1-NormalizedValue)
and swap colors :

    <Border.Background>
         <LinearGradientBrush StartPoint="0,0" EndPoint="1.0,0">
          <GradientStopCollection>
                 <GradientStop Offset="0.0" Color="#000" />
                 <GradientStop Offset="{Binding OneMinusNormalizedValue}" Color="#000" />
                 <GradientStop Offset="{Binding OneMinusNormalizedValue}" Color="#fff" />
                 <GradientStop Offset="1" Color="#fff" />
          </GradientStopCollection>
         </LinearGradientBrush>
    </Border.Background>

in fact same goes for the grid solution.