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

发布于 2025-01-10 12:57:37 字数 530 浏览 2 评论 0原文

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

我目前正在尝试使用 WPF 应用程序,并想尝试创建类似的东西(请原谅配色方案......我只是将其放在一起):

库存物品

期望的结果是:

  1. 有一个边框
  2. 区域边框区域需要背景image
  3. 以编程方式更改的进度条
  4. 各个区域中的静态文本
  5. 以编程方式更改各个区域中的文本

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

请记住,我是一个新手,所以你需要提供“耐心地向遭受头部创伤的孩子解释”的解释。

谢谢!

I've been learning some coding and have received some great pointers here, so I thought I'd ask about my current endeavor.

I'm currently experimenting with a WPF app and would like to try to create something like this (pardon the color scheme... I just threw this together):

Inventory Items

The desired outcome is:

  1. Have a bordered area
  2. The bordered area needs a background image
  3. Programmatically changeable progress bar
  4. Static text in various areas
  5. Programmatically changeable text in various areas

I have no idea where to even begin on creating something like this. I'm thinking of it from the perspective of a graphics editor like Paint.Net where I'd create layers for each element. This may be the wrong way of thinking, but that's where I'm at.

Please remember I'm a novice, so you'll want to provide the "patiently explaining to a child who suffered head trauma" explanation.

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

つ可否回来 2025-01-17 12:57:37

你好,我做了一个小样本。

输入图片这里的描述

这是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>

这是我使用的背景图片:

在此处输入图像描述

Hello I have made a small sample.

enter image description here

Here are the XAML codes:

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

Here is the background picture I used:

enter image description here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文