title: LinearGradientBrush Color Binding (Simple Bar Chart ItemsControl)
body: <p><strong>EDIT:</strong>
  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:</p>
  
  <pre><code>(Color)ColorConverter.ConvertFromString(colorArray[0])
  </code></pre>
  
  <p>The only problem remaining is the scaling (with colors). </p>
  
  <p>My color bars seem to be transparent (once again) but now with the proper color attached to each bar. <em>Also at start up of my program  all the 6 bars displayed (but they should not get displayed because it has no value yet).</em>
  <strong>Code:</strong></p>
  
  <pre><code>&lt;Border Height="30" Margin="15" Grid.RowSpan="6" &gt;
                  &lt;Border.Background&gt;
                      &lt;LinearGradientBrush StartPoint="0.0,0" EndPoint="1.0,0"&gt;
                          &lt;GradientStopCollection&gt;
                              &lt;GradientStop Offset="0.0" Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}" /&gt;
  
                              &lt;GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}" /&gt;
  
                          &lt;/GradientStopCollection&gt;
                      &lt;/LinearGradientBrush&gt;
                  &lt;/Border.Background&gt;
              &lt;/Border&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/sSwH0.png" alt="enter image description here"></p>
  
  <p>How exactly do i get rid of the transparent color fading at the middle/end of the bar?</p>
  
  <p>When i try adding the same color to the second Offset i am getting Full length bars (100%) and the scaling is nullified again.</p>
  
  <hr>
  
  <p>I have the following ItemsControl with a DateTemplate that represents a simple bar chart:</p>
  
  <pre><code>&lt;ItemsControl x:Name="icGrafiek"  
              Margin="0,0,0,0" 
              ItemsSource="{Binding Source={StaticResource Grafiek}}"
              ItemTemplate="{DynamicResource GrafiekItemTemplate}" 
              RenderTransformOrigin="1,0.5" Grid.RowSpan="6" Grid.Column="1"/&gt;
  
  &lt;DataTemplate x:Key="GrafiekItemTemplate"&gt;
              &lt;Grid&gt;
              &lt;Border Height="30" Margin="15" Grid.RowSpan="6" &gt;
                  &lt;Border.Background&gt;
  
                      &lt;LinearGradientBrush StartPoint="0.0,0" EndPoint="1.0,0"&gt;
                          &lt;GradientStopCollection&gt;
                              &lt;GradientStop Offset="0.0" Color="#fff" /&gt;
  
                              &lt;GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}" 
                                            Color="{Binding Fill, UpdateSourceTrigger=PropertyChanged}" /&gt;
  
                              &lt;GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}" 
                                            Color="{Binding Fill, UpdateSourceTrigger=PropertyChanged}" /&gt;                                                          
                          &lt;/GradientStopCollection&gt;
                      &lt;/LinearGradientBrush&gt;                
                  &lt;/Border.Background&gt;
              &lt;/Border&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>The problem is actually displaying the colors of my bars of my chart control.</p>
  
  <p>The following gets displayed:
  <img src="https://i.stack.imgur.com/NU0iG.png" alt="GradientBrush"></p>
  
  <p>Before the <code>GradientBrush</code> i use a <code>Rectangle</code> instead to create the bars. I used the GradientBrush so i could <strong>scale</strong> my bars (the <code>Binding</code> <strong>Value</strong> returns a List with values between 1.0 and 0 so they get scaled). <em>With a rectangle i was stuck and had no way of scaling my bars according to the 1.0 - 0 values that were being returned.</em></p>
  
  <p><em>Old code with <code>Rectangle</code>:</em></p>
  
  <pre><code> &lt;DataTemplate x:Key="GrafiekItemTemplate"&gt;
              &lt;Grid&gt;
                  &lt;Rectangle StrokeThickness="0" Height="30"  
                             Margin="15" 
                             HorizontalAlignment="Left" 
                             VerticalAlignment="Stretch"
                             Width="{Binding Value, UpdateSourceTrigger=PropertyChanged}" 
                             Fill="{Binding Fill, UpdateSourceTrigger=PropertyChanged}"&gt;
                      &lt;Rectangle.LayoutTransform&gt;
                          &lt;ScaleTransform ScaleX="20" /&gt;
                      &lt;/Rectangle.LayoutTransform&gt;
                  &lt;/Rectangle&gt;
              &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  </code></pre>
  
  <hr>
  
  <p>When i used a Rectangle with the Fill Binding my chart looked like this (like it should):
  The <strong>Fill</strong> <code>Binding</code> basically returns a list with Hex values  to obtain these colors.</p>
  
  <p><img src="https://i.stack.imgur.com/p0k6F.png" alt="Rectangle"></p>
  
  <hr>
  
  <p>How do i fill up the <code>LinearGradientBrush</code> with the colors showed in the picture above (array that holds the hex values of the colors)? The order of the colors stays the same.</p>
  
  <p><strong>Or if this is not possible how do i actually pull it off with the rectangle?
  If there is a other solution with rectangle i can just implement that again.</strong></p>
  
  <p>Best Regards PeterP.</p>