web-dev-qa-db-ja.com

背景画像と色のグリッド

背景画像と色の両方をxamlのグリッド全体に与えることは可能ですか?画像をスケーリングしていないので、色のない領域があります。グリッドの残りの部分に色を付けることは可能ですか?

これは私の現在のコードです:

<Grid>
            <Grid.Background>
                <ImageBrush Stretch="None" ImageSource="Images/background_top.png" AlignmentY="Top" AlignmentX="Center"/>
            </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
    </Grid>
12
Jerodev

私が考えることができる唯一の方法は、Backgroundプロパティを使用して色を設定し、グリッドに画像を追加して、すべての行と列にまたがることを確認することです。画像がグリッドの最初のアイテムである限り、他のアイテムは一番上に重ねられます。私はあなたが探している効果をあなたに与えると信じています。

<Grid Background="Red">
    <Image Grid.RowSpan="2" Stretch="None" Source="Images/background_top.png" VerticalAlignment="Top" HorizontalAlignment="Center"/>
    <Label Content="Label" Grid.Row="0" Height="28" HorizontalAlignment="Center"  Margin="10,10,0,0" Name="label1" VerticalAlignment="Top" />
    <Grid.RowDefinitions>
        <RowDefinition Height="50*" />
        <RowDefinition Height="50*" />
    </Grid.RowDefinitions>
</Grid>
9
Mark Hall

WPFでは、VisualBrushでpngと色の両方でブラシを定義したい場合にも、これを行うことができます(このブラシ-ブラシをレンダリングする際のパフォーマンスヒットのため、Windowsストアアプリでは他の多くのブラシは利用できません)基本的な例として、ブラシにはいろいろなプロパティがあります。

    <Window.Resources>
    <VisualBrush x:Key="myBrush">
        <VisualBrush.Visual>
            <Grid>
                <Rectangle Fill="Red"/>
                <Image Source="troll.png"/>
            </Grid>
        </VisualBrush.Visual>
    </VisualBrush>
</Window.Resources>
<Grid Background="{StaticResource myBrush}"/>
9
Iris Classon

グリッドの周りに、背景色として設定したい色の境界線を使用してみてください。

<Border Background="Red">
    <Grid>
        <Grid.Background>
            <ImageBrush Stretch="None" ImageSource="Images/background_top.png" AlignmentY="Top" AlignmentX="Center"/>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
    </Grid>
</Border>
7
VasileF

あなたは次のようなものを意味します:

<Grid Background="Red">
        <Grid.Background>
            <ImageBrush Stretch="None" ImageSource="Images/background_top.png" AlignmentY="Top" AlignmentX="Center"/>
        </Grid.Background>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*" />
        <RowDefinition Height="50*" />
    </Grid.RowDefinitions>
</Grid>
1
WooCaSh

あなたの質問に対する正確な答えではありませんが、同様の視覚効果を得るために、グリッドの背景を画像に設定することができます;ページ/ウィンドウの背景を色にします。

1
LogicalKip

別のグリッド内にグリッドを配置します。外側のグリッドにはSolidColorBrushがあり、内側のグリッドには部分的に透明なImageBrushがあります。