UI元素在运行时从WPF中消失

Question

我正在开发一个允许在视频聊天中连接两个对等的WPF应用程序。我在过去的两个月里一直在设计XAML设计师的用户界面，一切都很顺利，当我运行应用程序时，它确实显示了一切等等。直到昨天，绝对没有明显的理由。 当代码在另一台笔记本电脑上运行时，UI的某些部分不再显示。我坚持认为它之前已经发挥作用，现在已经不再发挥作用了。我也没有改变代码中的任何内容，这些内容可能与UI的那一部分有关，也没有在xaml中。

我确实检查过我在代码隐藏中也没有弄乱任何Visibility参数，所以我没有看到任何原因导致应用程序的行为突然改变。

有谁知道为什么会这样？

这是xaml：

<Window x:Class="RealSenseiConfFusion.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="1000" Width="1500"
    WindowStartupLocation="Manual"
    Left="0" Top="0"
    Closing="Window_Closing"
    Loaded="Window_Loaded" >
<Grid Background="LightSteelBlue">
    <Rectangle Margin="10,10,498.6,0" Name="rectangle1" Stroke="Black" RadiusX="9" RadiusY="9" Fill="LightSlateGray" Height="142" VerticalAlignment="Top" />
    <Grid Name="callAndSyncGrid" Margin="26,24,1165,835" Background="LightGray">
        <StackPanel>
            <TextBlock HorizontalAlignment="Center">ABOUT CALL</TextBlock>
            <TextBlock Name="myIpTextBlock">Your ip is:</TextBlock>
            <Grid Name="callGrid">
                <TextBox Height="23" HorizontalAlignment="Left" Name="txtIP" Background="GhostWhite" Foreground="Black" Width="221" />
                <Button Height="23" HorizontalAlignment="Right" Name="btnCall" Width="75" Click="btnCall_Click">Call</Button>
            </Grid>
            <Button Name="btnSync" Content="Start Synchronization" HorizontalAlignment="Left" Width="120" Height="25" Click="btnSynchronize_Click"/>
            <TextBlock Name="currentConvText"></TextBlock>
        </StackPanel>
    </Grid>
    <Grid Name="visSetupGrid" Margin="650,24,515,835" Background="LightGray">
        <StackPanel>
            <TextBlock HorizontalAlignment="Center">VISUALIZATION SETUP</TextBlock>
            <Grid>
                <TextBlock HorizontalAlignment="Left">  Visualization block 1:</TextBlock>
                <ComboBox Name="vis1Combo" HorizontalAlignment="Right">
                    <ComboBoxItem IsSelected="True">Vis1UC1</ComboBoxItem>
                    <ComboBoxItem>Vis1UC1_2</ComboBoxItem>
                    <ComboBoxItem>Vis1UC2</ComboBoxItem>
                    <ComboBoxItem>Vis1UC2_2</ComboBoxItem>
                    <ComboBoxItem>Vis2UC1</ComboBoxItem>
                    <ComboBoxItem>Vis2UC2</ComboBoxItem>
                    <ComboBoxItem>Vis2UC3</ComboBoxItem>
                    <ComboBoxItem>Vis3UC1</ComboBoxItem>
                    <ComboBoxItem>Vis3UC2</ComboBoxItem>
                    <ComboBoxItem>Vis3UC3</ComboBoxItem>
                </ComboBox>
            </Grid>
            <Grid>
                <TextBlock HorizontalAlignment="Left">  Visualization block 2:</TextBlock>
                <ComboBox Name="vis2Combo" HorizontalAlignment="Right">
                    <ComboBoxItem>Vis1UC1</ComboBoxItem>
                    <ComboBoxItem>Vis1UC1_2</ComboBoxItem>
                    <ComboBoxItem>Vis1UC2</ComboBoxItem>
                    <ComboBoxItem>Vis1UC2_2</ComboBoxItem>
                    <ComboBoxItem>Vis2UC1</ComboBoxItem>
                    <ComboBoxItem IsSelected="True">Vis2UC2</ComboBoxItem>
                    <ComboBoxItem>Vis2UC3</ComboBoxItem>
                    <ComboBoxItem>Vis3UC1</ComboBoxItem>
                    <ComboBoxItem>Vis3UC2</ComboBoxItem>
                    <ComboBoxItem>Vis3UC3</ComboBoxItem>
                </ComboBox>
            </Grid>
            <Grid>
                <TextBlock HorizontalAlignment="Left">  Visualization block 3:</TextBlock>
                <ComboBox Name="vis3Combo" HorizontalAlignment="Right">
                    <ComboBoxItem>Vis1UC1</ComboBoxItem>
                    <ComboBoxItem>Vis1UC1_2</ComboBoxItem>
                    <ComboBoxItem IsSelected="True">Vis1UC2</ComboBoxItem>
                    <ComboBoxItem>Vis1UC2_2</ComboBoxItem>
                    <ComboBoxItem>Vis2UC1</ComboBoxItem>
                    <ComboBoxItem>Vis2UC2</ComboBoxItem>
                    <ComboBoxItem>Vis2UC3</ComboBoxItem>
                    <ComboBoxItem>Vis3UC1</ComboBoxItem>
                    <ComboBoxItem>Vis3UC2</ComboBoxItem>
                    <ComboBoxItem>Vis3UC3</ComboBoxItem>
                </ComboBox>
            </Grid>
            <Button Name="btnVisApply" HorizontalAlignment="Center" Click="btnVisApply_Click">Apply!</Button>
        </StackPanel>
    </Grid>
    <Grid Name="otherPeerVideo" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1000" Height="700" Margin="0,83,0,0">
        <Grid Width="960" Height="540">
            <Border BorderBrush="DarkOrange" BorderThickness="4">
                <WindowsFormsHost Name="wfServer"/>
            </Border>
        </Grid>
    </Grid>
    <StackPanel Name="feedbackAndMyVideoStackPanel" Background="WhiteSmoke" Margin="1000,83,0,0" VerticalAlignment="Top" Width="454" Height="800">
        <Grid Name="vis1Grid" Height="160"></Grid>
        <Grid Name="vis2Grid" Height="160"></Grid>
        <Grid Name="vis3Grid" Height="160"></Grid>
        <Grid Name="myVideoGrid" VerticalAlignment="Bottom" Height="320">
            <Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="454" Height="300">
                <Border BorderBrush="Blue" BorderThickness="4">
                    <WindowsFormsHost Name="myVideo" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="446" Height="292"/>
                </Border>
            </Grid>
            <Button Name="myVideoHideButton" Click="myVideoHideButton_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Width="80" Height="20">Hide/Unhide</Button>
        </Grid>
    </StackPanel>
</Grid>

以下是设计器（在两台机器上）的外观截图：

以下是应用程序在我的机器上运行时的样子截图：

这里有一个屏幕截图，显示应用程序在笔记本电脑上运行时的样子：

Answer 1

我编译/尝试了你的代码。 当窗口变小时，许多组件消失。 因为边缘。

边距更换示例

• 之前：

使用展示位置

<Grid Name="callAndSyncGrid" Margin="26,24,1165,835" Background="LightGray">
    <!-- ... -->
</Grid>
<Grid Name="visSetupGrid" Margin="650,24,515,835" Background="LightGray">
        <!-- ... -->
</Grid>

• 后

带有“呼吸”的边距
放置有两列（ColumnDefinitions和Grid.Column =“1”;默认为0）。
每列占用可用空间的50％（50 *） 您还可以将大小表示为“自动”或323（硬编码大小）

<Grid Name="parentGridForLayout" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*"/> 
        <ColumnDefinition Width="50*"/> 
    </Grid.ColumnDefinitions>   
    <Grid Name="callAndSyncGrid" Margin="10" Background="LightGray">
        <!-- ... -->
    </Grid>
    <Grid Name="visSetupGrid" Margin="10"  Background="LightGray">
            <!-- ... -->
    </Grid>
</Grid>

建议

使用Grid + margin或Canvas是非常接近的方法。但是使用Grid，您可以创建Columns和Rows来组织布局。您可以将网格（或其他面板，如StackPanels，DockPanels，WrapPanels）组合成网格以组织布局。

免责声明： 仅靠我的代码是不够的 您需要使用许多面板组织所有GUI 我将从头开始重新创建窗口：空页面，然后放置第一个Grid（或任何合适的Panel），用列或行拆分它。然后将从前一个窗口导入的一些内容放在网格级别，然后进入子网格以添加更多网格/导入的内容

此致

Answer 2

正如@HighCore和@Emmanuel DURIN指出的那样，问题在于我使用边距定义了布局，如果我在不同的屏幕尺寸上运行应用程序会导致大麻烦。 为了纠正这个问题，我使用了Canvas＆＃39; es来放置每个元素相对于它们的容器。 现在我可以在不同的屏幕上使用该应用程序，所有内容都会按照我的需要显示。

这里有更好的布局用户界面供参考：

<Window x:Class="RealSenseiConfFusion.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="860" Width="1500"
    WindowStartupLocation="Manual"
    Left="0" Top="0"
    Closing="Window_Closing"
    Loaded="Window_Loaded" >
<Grid Background="LightSteelBlue">
    <Canvas>
        <Canvas Canvas.Top="10" Canvas.Left="10" Width="980" Height="142">
            <Rectangle Width="980" Height="132" Name="rectangle1" Stroke="Black" RadiusX="9" RadiusY="9" Fill="LightSlateGray" VerticalAlignment="Top" />
            <Grid Name="callAndSyncGrid" Canvas.Top="15" Canvas.Left="15" Width="200" Background="LightGray">
                <StackPanel>
                    <TextBlock HorizontalAlignment="Center">ABOUT CALL</TextBlock>
                    <TextBlock Name="myIpTextBlock">Your ip is:</TextBlock>
                    <Grid Name="callGrid">
                        <TextBox Height="23" HorizontalAlignment="Left" Name="txtIP" Background="GhostWhite" Foreground="Black" Width="221" />
                        <Button Height="23" HorizontalAlignment="Right" Name="btnCall" Width="75" Click="btnCall_Click">Call</Button>
                    </Grid>
                    <Button Name="btnSync" Content="Start Synchronization" HorizontalAlignment="Left" Width="120" Height="25" Click="btnSynchronize_Click"/>
                    <TextBlock Name="currentConvText"></TextBlock>
                </StackPanel>
            </Grid>
            <Grid Name="visSetupGrid" Canvas.Top="15" Canvas.Right="15" Width="200" Background="LightGray">
                <StackPanel>
                    <TextBlock HorizontalAlignment="Center">VISUALIZATION SETUP</TextBlock>
                    <Grid>
                        <TextBlock HorizontalAlignment="Left">  Visualization block 1:</TextBlock>
                        <ComboBox Name="vis1Combo" HorizontalAlignment="Right">
                            <ComboBoxItem IsSelected="True">Vis1UC1</ComboBoxItem>
                            <ComboBoxItem>Vis1UC1_2</ComboBoxItem>
                            <ComboBoxItem>Vis1UC2</ComboBoxItem>
                            <ComboBoxItem>Vis1UC2_2</ComboBoxItem>
                            <ComboBoxItem>Vis2UC1</ComboBoxItem>
                            <ComboBoxItem>Vis2UC2</ComboBoxItem>
                            <ComboBoxItem>Vis2UC3</ComboBoxItem>
                            <ComboBoxItem>Vis3UC1</ComboBoxItem>
                            <ComboBoxItem>Vis3UC2</ComboBoxItem>
                            <ComboBoxItem>Vis3UC3</ComboBoxItem>
                        </ComboBox>
                    </Grid>
                    <Grid>
                        <TextBlock HorizontalAlignment="Left">  Visualization block 2:</TextBlock>
                        <ComboBox Name="vis2Combo" HorizontalAlignment="Right">
                            <ComboBoxItem>Vis1UC1</ComboBoxItem>
                            <ComboBoxItem>Vis1UC1_2</ComboBoxItem>
                            <ComboBoxItem>Vis1UC2</ComboBoxItem>
                            <ComboBoxItem>Vis1UC2_2</ComboBoxItem>
                            <ComboBoxItem>Vis2UC1</ComboBoxItem>
                            <ComboBoxItem IsSelected="True">Vis2UC2</ComboBoxItem>
                            <ComboBoxItem>Vis2UC3</ComboBoxItem>
                            <ComboBoxItem>Vis3UC1</ComboBoxItem>
                            <ComboBoxItem>Vis3UC2</ComboBoxItem>
                            <ComboBoxItem>Vis3UC3</ComboBoxItem>
                        </ComboBox>
                    </Grid>
                    <Grid>
                        <TextBlock HorizontalAlignment="Left">  Visualization block 3:</TextBlock>
                        <ComboBox Name="vis3Combo" HorizontalAlignment="Right">
                            <ComboBoxItem>Vis1UC1</ComboBoxItem>
                            <ComboBoxItem>Vis1UC1_2</ComboBoxItem>
                            <ComboBoxItem IsSelected="True">Vis1UC2</ComboBoxItem>
                            <ComboBoxItem>Vis1UC2_2</ComboBoxItem>
                            <ComboBoxItem>Vis2UC1</ComboBoxItem>
                            <ComboBoxItem>Vis2UC2</ComboBoxItem>
                            <ComboBoxItem>Vis2UC3</ComboBoxItem>
                            <ComboBoxItem>Vis3UC1</ComboBoxItem>
                            <ComboBoxItem>Vis3UC2</ComboBoxItem>
                            <ComboBoxItem>Vis3UC3</ComboBoxItem>
                        </ComboBox>
                    </Grid>
                    <Button Name="btnVisApply" HorizontalAlignment="Center" Click="btnVisApply_Click">Apply!</Button>
                </StackPanel>
            </Grid>
        </Canvas>

        <Grid Name="otherPeerVideo" HorizontalAlignment="Left" Canvas.Top="150" Canvas.Left="20">
            <Grid Width="960" Height="540">
                <Border BorderBrush="DarkOrange" BorderThickness="4">
                    <WindowsFormsHost Name="wfServer"/>
                </Border>
            </Grid>
        </Grid>

        <StackPanel Name="feedbackAndMyVideoStackPanel" Background="WhiteSmoke" Canvas.Right="15" Canvas.Top="15" VerticalAlignment="Top" Width="454" Height="800">
            <Grid Name="vis1Grid" Height="160"></Grid>
            <Grid Name="vis2Grid" Height="160"></Grid>
            <Grid Name="vis3Grid" Height="160"></Grid>
            <Grid Name="myVideoGrid" VerticalAlignment="Bottom" Height="320">
                <Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="454" Height="300">
                    <Border BorderBrush="Blue" BorderThickness="4">
                        <WindowsFormsHost Name="myVideo" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="446" Height="292"/>
                    </Border>
                </Grid>
                <Button Name="myVideoHideButton" Click="myVideoHideButton_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Width="80" Height="20">Hide/Unhide</Button>
            </Grid>
        </StackPanel>
    </Canvas>
</Grid>