如何在WPF中創建具有背景影像和可更改文本的邊框區域

我一直在學習一些編碼，并在這里收到了一些很好的指導，所以我想我會問一下我目前的努力。

我目前正在試驗一個 WPF 應用程式，并想嘗試創建這樣的東西（請原諒配色方案......我只是把它放在一起）：

期望的結果是：

1. 有一個邊界區域
2. 邊框區域需要背景圖片
3. 以編程方式可更改的進度條
4. 各個區域的靜態文本
5. 在各個區域中以編程方式更改的文本

我什至不知道從哪里開始創建這樣的東西。我從像 Paint.Net 這樣的圖形編輯器的角度來考慮它，我會在其中為每個元素創建圖層。這可能是錯誤的思維方式，但這就是我所在的地方。

請記住，我是新手，所以您需要提供“耐心地向頭部外傷的孩子解釋”的解釋。

謝謝！

uj5u.com熱心網友回復：

你好，我做了一個小樣本。

以下是 XAML 代碼：

<StackPanel Orientation="Horizontal">
    <Border BorderBrush="#FF3CFF00" BorderThickness="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100,0,0">
        <StackPanel>
            <StackPanel.Background>
                <ImageBrush ImageSource="/Pictures/circuit-1242111.jpg"/>
            </StackPanel.Background>
            <TextBox Margin="20,10,20,0" BorderBrush="{x:Null}" Background="{x:Null}" Text="103/250" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="16"></TextBox>
            <ProgressBar Margin="0,10,0,0" Height="10"></ProgressBar>
            <Grid>
                <Grid.Background>
                    <SolidColorBrush Color="#FF8A8A8A" Opacity="0.85"/>
                </Grid.Background>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Text="Circuits"></TextBlock>
            </Grid>
        </StackPanel>
    </Border>
    <Border BorderBrush="#FF3CFF00" BorderThickness="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100,0,0">
        <StackPanel>
            <StackPanel.Background>
                <ImageBrush ImageSource="/Pictures/circuit-1242111.jpg"/>
            </StackPanel.Background>
            <TextBox Margin="20,10,20,0" BorderBrush="{x:Null}" Background="{x:Null}" Text="12/300" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="16"></TextBox>
            <ProgressBar Margin="0,10,0,0" Height="10"></ProgressBar>
            <Grid>
                <Grid.Background>
                    <SolidColorBrush Color="#FF8A8A8A" Opacity="0.85"/>
                </Grid.Background>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Text="Switches"></TextBlock>
            </Grid>
        </StackPanel>
    </Border>
    <Border BorderBrush="#FF3CFF00" BorderThickness="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100,0,0">
        <StackPanel>
            <StackPanel.Background>
                <ImageBrush ImageSource="/Pictures/circuit-1242111.jpg"/>
            </StackPanel.Background>
            <TextBox Margin="20,10,20,0" BorderBrush="{x:Null}" Background="{x:Null}" Text="347/500" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="16"></TextBox>
            <ProgressBar Margin="0,10,0,0" Height="10"></ProgressBar>
            <Grid>
                <Grid.Background>
                    <SolidColorBrush Color="#FF8A8A8A" Opacity="0.85"/>
                </Grid.Background>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Text="Resistors"></TextBlock>
            </Grid>
        </StackPanel>
    </Border>
</StackPanel>

這是我使用的背景圖片：

標籤：wpf wpf 控件

上一篇：已發布事件未訂閱或未發布

下一篇：WPFListView未系結到ViewModel屬性