0

编辑： 我将十六进制值（字符串）转换为画笔，因此它没有采用我的颜色，如下所示：

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

在此处输入图像描述

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

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

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

我有一个ItemsControl使用 aDataTemplate所以项目显示为矩形。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 内。我已将控件的行跨度设置为 6，列跨度设置为 1。

我想要达到的目标：

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

我如何确保这些长度是动态的，而不是用我乘以 2000 来填充我的屏幕的值填充它们。例如网格中第二列的大小。

我也可以Blend使用这个布局。

4

1 回答 1

1

1）不要用矩形，一个Border就够了（Borders有填充），Borders有内容。
2）在绑定中使用标准化值 NValue = Value/MaxValue（介于 0.0 和 1.0 之间）
3）您可以通过两种方式实现您想要的：
1）在 DataTemplate 中使用带有两列的网格。
第一个列宽绑定到 NormalizedValue（单位是星号 (*)），另一个绑定到 (1-NormalizedValue)（单位也是星号 (*)）。
让您的 ViewModel 将您的 SWNVALue = NValue 作为星宽 (new GridLength(NValue,GridUnitType.Star)) 返回给您，或者编写一个转换器来获得双倍的星宽。

2) 用 Border 填充所有空间，以及在归一化 Value 处停止的 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>

（示例在黑色背景上制作白色矩形。）
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>

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

于 2012-04-27T10:23:39.230 回答