如何在 WPF 中创建具有背景图像和可变文本的边框区域

Question

我一直在学习一些编码并且在这里收到了一些很好的指导，所以我想我会问一下我目前的努力。

我目前正在试验一个 WPF 应用程序，并想尝试创建这样的东西（请原谅配色方案......我只是把它放在一起）：

期望的结果是：

有边界区域
边框区域需要背景图片
可通过编程更改进度条
各个区域的静态文本
各个区域中可通过编程方式更改的文本

我什至不知道从哪里开始创建这样的东西。我是从像 Paint.Net 这样的图形编辑器的角度来考虑的，我会为每个元素创建图层。这可能是错误的思维方式，但这就是我的立场。

请记住我是新手，所以你要提供“耐心地向 child 头部外伤患者解释”的解释。

谢谢！

Answer 1

你好我做了一个小样

这里是 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 中创建具有背景图像和可变文本的边框区域

How to Create a Bordered Area in WPF That Has a Background Image and Changeable Text

wpf

wpf-controls