Question

修改我有十六进制值（字符串），我转换为一个画笔因此它没有采取我的颜色以下成功地取得我的颜色：

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

剩下的唯一问题是缩放（使用颜色）。

我的颜色条似乎是透明的（再一次），但现在每条都附有适当的颜色。同样在我的程序启动时显示所有6个条形图（但它们不应显示，因为它还没有值）。

代码：

<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>

enter image description here

我究竟如何摆脱酒吧中间/末端的透明色褪色？

当我尝试将相同颜色添加到第二个偏移时，我得到全长条（100％）并且缩放再次无效。

突然间，控件中还有一个空的部分。当控件没有旋转180度时，这种行为根本就不会发生！

我有ItemsControl使用DataTemplate，因此项目显示为矩形。 itemsControl也转过来，所以矩形显示在正确的方向。

<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>

绑定Fill给出了那些条形（矩形）的大小。

itemsControl本身放置在一个包含2列和6行的Grid中。我已将控件的rowspan设置为6，将columnspan设置为1。

我想要实现的目标：

itemsControl的最大值应占网格第二列的整个长度。目前我正在进行一些计算（这会返回一个带有值的列表）以传递给Fill绑定，并且我将此结果乘以例如100或1000.但这是我要避免的硬编码。

我怎样才能确保这些长度是动态的，而不是用一个值乘以2000来填充我的屏幕。例如，网格中第二列的大小。

我也可以使用Blend来处理此布局。

Answer 1

1）不要使用矩形，边框就足够了（边框有填充），边框有内容 2）在绑定中使用标准化值NValue = Value / MaxValue（介于0.0和1.0之间）
3）你可以通过两种方式达到你想要的目的：
1）在DataTemplate中有一个带有两列的网格第一列宽度绑定到NormalizedValue（单位是星号（*）），另一个 to（1-NormalizedValue）（单位也是星号（*））让您的ViewModel将SWNVAlue = NValue作为星形宽度（新的GridLength（NValue，GridUnitType.Star））返回，或者将转换器写成双星的星形宽度。

2）边框填充所有空格，以及在标准化值处停止的gradientBrush：

    <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>

（例子在blak背景上制作白色矩形。）
4）你不需要旋转/翻转。使用（1-NValue）代替NValue，或左对齐，或...
但你不需要：=）

编辑：如果你需要让你的'矩形'在右边对齐，然后开始在不同的X，例如使用GradientStopCollection方式，只需使用（1-NormalizedValue）并交换颜色：

    <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>

实际上网格解决方案也是如此。

Scale ItemsControl基于网格宽度的矩形

1 个答案: