如何在C＃WPF中为一组图像设置适当的布局？

debugcn 发表于 Dev

阿斯多格

我遇到了哪些问题

我正在尝试为WPF构造函数中的一组Image对象进行适当的布局。

我现在遇到的问题是：
1）我无法正确对齐Image元素。正如您从图像中看到的，东西被放到了各处。我想我可以在一段时间后将所有内容放置在所需的位置，但问题
2就会出现。2）如果我尝试调整窗口大小（应用程序将以全屏模式运行，但我需要以任何分辨率运行），则元素不会调整大小。因为XAML中定义了Height和Width，所以我无法找到它们是否可以调整大小而无需专门为其编写代码。

我想做什么

如果我使用完全错误的方法，请允许我解释一下我要达到的目标。

在程序中，我应该显示一个人及其器官。图像可能会有所不同，但是相同类型的图像具有相同的宽度和高度。为了显示，我使用了一组Image对象。根据需要显示的内容以编程方式设置ImageSource属性。这是要理解的图像。
https://i.stack.imgur.com/l2VX9.png

XAML的外观

这是我在上一张图片中使用的。

<!-- View Patient -->
        <TabItem x:Name="tabPatientView" Header="Patient View" >
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Button x:Name="btnViewPatientBack" Content="Назад" Grid.Column="0" Click="BtnNavMenuPatients_Click"/>
                <Image x:Name="imgPatientViewHead" Grid.Column="1" HorizontalAlignment="Left" Margin="682,45,0,0" VerticalAlignment="Top" Width="100" Source="Resources/Bodies/Human/Male/Head.png"/>
                <Image x:Name="imgPatientViewBody" Grid.Column="1" HorizontalAlignment="Left" Height="234" Margin="639,132,0,0" VerticalAlignment="Top" Width="158" Source="Resources/Bodies/Human/Male/Body.png"/>
                <Image x:Name="imgPatientViewArmRight" Grid.Column="1" HorizontalAlignment="Left" Height="86" Margin="402,105,0,0" VerticalAlignment="Top" Width="252" Source="Resources/Bodies/Human/Male/RightArm.png"/>
                <Image x:Name="imgPatientViewArmLeft" Grid.Column="1" HorizontalAlignment="Left" Height="86" Margin="812,105,0,0" VerticalAlignment="Top" Width="252" Source="Resources/Bodies/Human/Male/LeftArm.png"/>
                <Image x:Name="imgPatientViewLegRight" Grid.Column="1" HorizontalAlignment="Left" Height="216" Margin="645,339,0,0" VerticalAlignment="Top" Width="85" Source="Resources/Bodies/Human/Male/RightLeg.png"/>
                <Image x:Name="imgPatientViewLegLeft" Grid.Column="1" HorizontalAlignment="Left" Height="216" Margin="730,339,0,0" VerticalAlignment="Top" Width="92" Source="Resources/Bodies/Human/Male/LeftLeg.png"/>
                <Image x:Name="imgPatientViewBrain" Grid.Column="1" HorizontalAlignment="Left" Height="40" Margin="694,45,0,0" VerticalAlignment="Top" Width="78" Source="Resources/Bodies/Human/Male/Brain.png"/>
                <Image x:Name="imgPatientViewHeart" Grid.Column="1" HorizontalAlignment="Left" Height="59" Margin="740,132,0,0" VerticalAlignment="Top" Width="67" Source="Resources/Bodies/Human/Male/Heart.png"/>
                <Image x:Name="imgPatientViewBreath" Grid.Column="1" HorizontalAlignment="Left" Height="99" Margin="671,120,0,0" VerticalAlignment="Top" Width="126" Source="Resources/Bodies/Human/Male/Breath.png"/>
                <Image x:Name="imgPatientViewLiver" Grid.Column="1" HorizontalAlignment="Left" Height="39" Margin="659,224,0,0" VerticalAlignment="Top" Width="71" Source="Resources/Bodies/Human/Male/Liver.png"/>
                <Image x:Name="imgPatientViewKidneys" HorizontalAlignment="Left" Height="55" VerticalAlignment="Top" Width="148" Margin="659,279,0,0" Grid.Column="1" Source="Resources/Bodies/Human/Male/Kidneys.png"/>
                <Image x:Name="imgPatientViewStomach" Grid.Column="1" HorizontalAlignment="Left" Height="41" Margin="701,233,0,0" VerticalAlignment="Top" Width="71" Source="Resources/Bodies/Human/Male/Stomach.png"/>
                <Image x:Name="imgPatientViewIntestines" Grid.Column="1" HorizontalAlignment="Left" Height="57" Margin="682,263,0,0" VerticalAlignment="Top" Width="68" Source="Resources/Bodies/Human/Male/Intestines.png"/>
                <Image x:Name="imgPatientViewBladder" Grid.Column="1" HorizontalAlignment="Left" Height="33" Margin="716,292,0,0" VerticalAlignment="Top" Width="37" Source="Resources/Bodies/Human/Male/Bladder.png"/>
                <Image x:Name="imgPatientViewReproduction" HorizontalAlignment="Left" Height="33" VerticalAlignment="Top" Width="37" Margin="716,325,0,0" Grid.Column="1" Source="Resources/Bodies/Human/Male/Reproduction.png"/>
                <Image x:Name="imgPatientViewSpleen" Grid.Column="1" HorizontalAlignment="Left" Height="26" Margin="781,205,0,0" VerticalAlignment="Top" Width="25" Source="Resources/Bodies/Human/Male/Spleen.png"/>
            </Grid>
        </TabItem>

有什么方法可以使事情变得容易吗？我真的认为我在那里做很多不必要的工作。对于这种情况，也许有一些控制要素。不能说我还熟悉WPF。

斯摩拉克语

或者，如果您不想采用我在另一个答案中提到的ViewModel + ListView方法。您可以这样做：

<TabItem x:Name="tabPatientView" Header="Patient View">
    <ViewBox>
        <Canvas Height="100" Width="100">
            <Image x:Name="imgPatientViewHead" Canvas.Top="Y" Canvas.Right="X" Height="26" Stretch="Uniform" Source="Resources/Bodies/Human/Male/Head.png"/>
            ...
            <Image x:Name="imgPatientViewSpleen" Canvas.Top="Y" Canvas.Right="X"  Height="26" Stretch="Uniform" Source="Resources/Bodies/Human/Male/Spleen.png"/>
        </Canvas>
    </ViewBox>
</TabItem>

注意：如果您明确设置画布的高度，则将使每个图像的高度都相对于该设置的高度。显然，Canvas.Top和Canvas.Right的值必须是数字而不是X和Y ...

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-1

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章