0

編集： 私はブラシに変換した16進値（文字列）を持っていたので、それは私の色を取りませんでした次のように私の色をうまく取ります：

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

ここに画像の説明を入力してください

バーの中央/端にある透明な色あせをどの程度正確に取り除くことができますか？

2番目のオフセットに同じ色を追加しようとすると、全長バー（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行のグリッド内に配置されます。コントロールの行スパンを6に、列スパンを1に設定しました。

私が達成したいこと：

itemsControlの最大値は、グリッドの2番目の列の全長を取る必要があります。現在、バインディングに渡すためにいくつかの計算（これは値を含むリストを返します）を実行しており、Fillこの結果にたとえば100または1000を掛けます。しかし、これはハードコーディングされているため、避けたいと思います。

画面を埋めるために2000を掛ける値で埋めるのではなく、これらの長さが動的になっていることを確認するにはどうすればよいですか。たとえば、グリッドの2番目の列のサイズ。

Blendこのレイアウトで作業することもできます。

4

1 に答える 1

1

1）長方形を使用しないでください。境界線で十分であり（境界線には塗りつぶしがあります）、境界線にはコンテンツがあります。
2）バインディングで正規化された値を使用しますNValue = Value / MaxValue（0.0〜1.0）
3）2つの方法で目的を達成できます：
1）2つの列を持つDataTemplateのグリッドを使用します。
最初の列幅はNormalizedValue（単位は星（*））にバインドされ、もう1つは（1-NormalizedValue）（単位も星（*））にバインドされます。
ViewModelにSWNVAlue=NValueを星の幅として返すようにするか（new GridLength（NValue、GridUnitType.Star））、星の幅を2倍にするコンバーターを作成します。

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>

（例では、黒い背景に白い長方形を作成します。）
4）回転/反転する必要はありません。NValueの代わりに（1-NValue）を使用するか、左揃えにするか、または...
ただし、：=）する必要はありません。

編集：「長方形」をすべて右側に揃える必要があり、たとえばGradientStopCollectionの方法で別のXから開始する必要がある場合は、（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 に答える