Странная проблема с макетом MVVM .Net 4.7.2 Элементы управления приложениями исчезают

Я создаю приложение MVVM с использованием .Net 4.7.2, которое работает как мастер (на основе https://www.codeproject.com/KB/WPF/InternationalizedWizard.aspx?display=Print), поэтому никаких дополнительных фреймворков, только класс RelayCommand, MainWindow.cs, в котором размещено главное представление (представление, в котором есть элементы навигации мастер с левой стороны, а с правой стороны - область, в которой размещены подвиды, которые отображаются в зависимости от этапа работы мастера).

Проблема с Mi в том, что один из моих пользователей испытывает очень странное поведение с элементами управления. Это примерная фотография того, как должно выглядеть приложение:

Странная проблема с макетом MVVM .Net 4.7.2 Элементы управления приложениями исчезают

А это образец фотографии того, что происходит с пользователем. Обратите внимание, что изображение в нижнем левом углу исчезает, полоса в нижнем левом углу также исчезает, заголовок и верхний текст перемещаются вверх и обрезаны внутри окна, а остальное содержимое в правой части исчезает. Странная проблема с макетом MVVM .Net 4.7.2 Элементы управления приложениями исчезают

Подобно базовому приложению InternationalizedWizard, я разместил элементы управления в сетке с горизонтальным и вертикальным выравниванием, настроенным на растяжение. В

        <Border Background = "White" Grid.Column = "1" Grid.Row = "0">
                <ScrollViewer>
                    <HeaderedContentControl Content = "{Binding Path=CurrentPage}" Header = "{Binding Path=CurrentPage.DisplayName}" />
                </ScrollViewer>
            </Border>

Я применил этот стиль к HeaderedContentControl:

<Style TargetType = "{x:Type HeaderedContentControl}">
    <Setter Property = "Template">
        <Setter.Value>
            <ControlTemplate TargetType = "{x:Type HeaderedContentControl}">
                <StackPanel Margin = "2,0">
                    <Grid Margin = "1,1,1,12" RenderTransformOrigin = "0.5,0.5">
                        <Rectangle Fill = "{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Height = "3" Margin = "10,-4" Opacity = "0.6" RadiusX = "8" RadiusY = "8" VerticalAlignment = "Bottom" />
                        <ContentPresenter ContentSource = "Header" TextBlock.FontSize = "22" TextBlock.FontWeight = "DemiBold" TextBlock.Foreground = "Black" HorizontalAlignment = "Center" VerticalAlignment = "Center" OpacityMask = "Black" />
                        <Grid.Effect>
                            <DropShadowEffect Opacity = "0.1" />
                        </Grid.Effect>
                        <Grid.RenderTransform>
                            <RotateTransform Angle = "0" />
                        </Grid.RenderTransform>
                    </Grid>
                    <Grid>
                        <Rectangle Fill = "{TemplateBinding Background}" />
                        <ContentPresenter ContentSource = "Content" />
                    </Grid>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Средство просмотра прокрутки прокручивается вверх и вниз только в том случае, если содержимое велико, но в этом случае содержимое должно соответствовать размеру, чтобы, как и ожидалось, пользователь не увидел средство просмотра прокрутки.

Изображение в левом нижнем углу, которое странным образом исчезает, было помещено в столбец 0, строку 0 сетки с настраиваемым полем, чтобы оно оставалось в этой области:

<Image Grid.Column = "0" Grid.Row = "0" Source = "..\Assets\SplashLogo.png" HorizontalAlignment = "Center" VerticalAlignment = "Bottom" Stretch = "None" Margin = "20,20,20,20"/>

На первой отображаемой странице (например, приветствие) есть еще одна сетка с двумя

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition MinHeight = "30" MaxHeight = "60"/>
            <RowDefinition Height = "*" MinHeight = "200"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row = "0"  Text = "{x:Static res:Strings.SomeText_Description}" FontSize = "15" FontWeight = "Light" Margin = "20,0,20,0"  TextWrapping = "Wrap" />
        <StackPanel Grid.Row = "1" Orientation = "Horizontal" VerticalAlignment = "Center" HorizontalAlignment = "Center">
            <Label   Content = "{x:Static res:Strings.WelcomeView_SomeText}" FontSize = "15" FontWeight = "Light" HorizontalAlignment = "Center" VerticalAlignment = "Center" Margin = "20,0,20,0" />
            <TextBox   Text = "{Binding Path=SomeInput, UpdateSourceTrigger=PropertyChanged}" Height = "25" Width = "200" FontSize = "15" FontWeight = "Light" HorizontalAlignment = "Left">
                <TextBox.InputBindings>
                    <KeyBinding Key = "Enter" Command = "{Binding MoveNextFromWelcomeCommand}" CommandParameter = "{Binding Path=Text, RelativeSource = {RelativeSource AncestorType = {x:Type TextBox}}}" />
                </TextBox.InputBindings>
            </TextBox>
        </StackPanel>
    </Grid>

Но содержимое панели стека полностью исчезает из поля зрения.

Наконец, нижняя область основного представления создается в виде границы, подобной этой, которая также полностью исчезает из поля зрения:

<Border Grid.Column = "0" Grid.Row = "1" Background = "LightGray" Grid.ColumnSpan = "2">

                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width = "Auto" />
                                <ColumnDefinition Width = "*" />
                                <ColumnDefinition Width = "Auto" />
                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>
                                <RowDefinition Height = "*" />
                                <RowDefinition Height = "*" />
                            </Grid.RowDefinitions>

                            <TextBlock Grid.Column = "0" Grid.Row = "1" Grid.ColumnSpan = "5" Margin = "4" FontSize = "15" Text = "{Binding Path=ReportStatus}" VerticalAlignment = "Center" Visibility = "{Binding Path=ShowReportStatus}" />

                            <!-- NAVIGATION BUTTONS -->
                            <Grid Grid.Column = "2" Grid.Row = "0" Grid.IsSharedSizeScope = "True" HorizontalAlignment = "Right" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition SharedSizeGroup = "Buttons" />
                                    <ColumnDefinition SharedSizeGroup = "Buttons" />
                                    <ColumnDefinition SharedSizeGroup = "Buttons" />
                                    <ColumnDefinition SharedSizeGroup = "Buttons" />
                                </Grid.ColumnDefinitions>
                                <Button Grid.Column = "1" Grid.Row = "0" Command = "{Binding Path=MovePreviousCommand}" Style = "{StaticResource movePreviousButtonStyle}" />
                                <Button Grid.Column = "2" Grid.Row = "0" Command = "{Binding Path=MoveNextCommand}" Style = "{StaticResource moveNextButtonStyle}" />
                                <Button Grid.Column = "3" Grid.Row = "0" Command = "{Binding Path=CancelCommand}" Style = "{StaticResource cancelButtonStyle}" />

                            </Grid>
                        </Grid>
                    </Border>

Сначала я думал, что может быть проблема с версией .NET или ОС, но у моих пользователей последняя версия Windows 10 Enterprise (10.0.17134) и двойной экран с 1: 3840x2160 2: 2560x1600. Я пытался воспроизвести это на своем компьютере, но у меня все работает нормально. Я также протестировал приложение в Windows 7, и оно работает без проблем.

Я действительно не понимаю, что может происходить, имеет ли это какое-либо отношение к настройкам DPI пользователя или какой-либо функции специальных возможностей?

Обновлено:

Чтобы упростить задачу, вот полный код xaml основного представления:

<UserControl x:Class = "MyCompany.MyAppName.App.View.MyAppView"
             xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local = "clr-namespace:MyCompany.MyAppName.App.View"
             xmlns:viewModel = "clr-namespace:MyCompany.MyAppName.App.ViewModel"
             xmlns:view = "clr-namespace:MyCompany.MyAppName.App.View"
             xmlns:res = "clr-namespace:MyCompany.MyAppName.App.Assets"
             xmlns:util = "clr-namespace:MyCompany.MyAppName.App.Utils"
             mc:Ignorable = "d"
             x:Name = "configuratorControl" d:DesignHeight = "600" d:DesignWidth = "600"
             >

    <UserControl.Resources>
        <util:PercentageConverter x:Key = "percentageConverter"/>

        <DataTemplate DataType = "{x:Type viewModel:ObjectSelectionViewModel}">
            <view:ObjectSelectionPageView/>
        </DataTemplate>

        <DataTemplate DataType = "{x:Type viewModel:CurrentObjectComponentsViewModel}">
            <view:CurrentObjectComponentsView/>
        </DataTemplate>

        <DataTemplate DataType = "{x:Type viewModel:CurrentObjectOptionsViewModel}">
            <view:CurrentObjectOptionsView/>
        </DataTemplate>

        <DataTemplate DataType = "{x:Type viewModel:SageFourViewModel}">
            <view:SageFourView/>
        </DataTemplate>

        <DataTemplate DataType = "{x:Type viewModel:SageThreeViewModel}">
            <view:SageThreeView/>
        </DataTemplate>

        <DataTemplate DataType = "{x:Type viewModel:ObjectViewModel}">
            <view:MyNumberView/>
        </DataTemplate>

        <Style TargetType = "{x:Type Button}">
            <Setter Property = "Padding" Value = "3.5,0" />
            <Setter Property = "Margin" Value = "3.5" />
            <Setter Property = "MinWidth" Value = "80" />
            <Setter Property = "FontSize" Value = "15"/>
            <Setter Property = "FontWeight" Value = "Regular"/>
        </Style>

        <!-- This Style inherits from the Button style seen above. -->
        <Style BasedOn = "{StaticResource {x:Type Button}}" TargetType = "{x:Type Button}" x:Key = "moveNextButtonStyle">
            <Setter Property = "Content" Value = "{x:Static res:Strings.MyAppView_Button_MoveNext}" />
            <Style.Triggers>
                <DataTrigger Binding = "{Binding Path=IsOnLastPage}" Value = "True">
                    <Setter Property = "Content" Value = "{x:Static res:Strings.SageThreeView_Confirm}" />
                </DataTrigger>
                <DataTrigger Binding = "{Binding Path=IsOnCreateSageThreePage}" Value = "True">
                    <Setter Property = "Content" Value = "{x:Static res:Strings.MyAppView_Button_CreateSageThree}" />
                </DataTrigger>
            </Style.Triggers>

        </Style>

        <Style BasedOn = "{StaticResource {x:Type Button}}" TargetType = "{x:Type Button}" x:Key = "cancelButtonStyle">
            <Setter Property = "Content" Value = "{x:Static res:Strings.MyAppView_Button_Cancel}" />
            <Style.Triggers>
                <DataTrigger Binding = "{Binding Path=IsOnLastPage}" Value = "True">
                    <Setter Property = "Content" Value = "{x:Static res:Strings.MyAppView_Button_ExportPDF}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style BasedOn = "{StaticResource {x:Type Button}}" TargetType = "{x:Type Button}" x:Key = "movePreviousButtonStyle">
            <Setter Property = "Content" Value = "{x:Static res:Strings.MyAppView_Button_MovePrevious}" />
        </Style>

        <!-- HEADERED CONTENT CONTROL STYLE -->
        <Style TargetType = "{x:Type HeaderedContentControl}">
            <Setter Property = "Template">
                <Setter.Value>
                    <ControlTemplate TargetType = "{x:Type HeaderedContentControl}">
                        <StackPanel Margin = "2,0">
                            <Grid Margin = "1,1,1,12" RenderTransformOrigin = "0.5,0.5">
                                <Rectangle Fill = "{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Height = "3" Margin = "10,-4" Opacity = "0.6" RadiusX = "8" RadiusY = "8" VerticalAlignment = "Bottom" />
                                <ContentPresenter ContentSource = "Header" TextBlock.FontSize = "22" TextBlock.FontWeight = "DemiBold" TextBlock.Foreground = "Black" HorizontalAlignment = "Center" VerticalAlignment = "Center" OpacityMask = "Black" />
                                <Grid.Effect>
                                    <DropShadowEffect Opacity = "0.1" />
                                </Grid.Effect>
                                <Grid.RenderTransform>
                                    <RotateTransform Angle = "0" />
                                </Grid.RenderTransform>
                            </Grid>
                            <Grid>
                                <Rectangle Fill = "{TemplateBinding Background}" />
                                <ContentPresenter ContentSource = "Content" />
                            </Grid>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key = "workflowStepTemplate">
            <Border x:Name = "bdOuter" BorderBrush = "Black" BorderThickness = "0,0,1,1" CornerRadius = "12" Margin = "1,1,1,12" Opacity = "0.25" SnapsToDevicePixels = "True">
                <Border x:Name = "bdInner" Background = "White" BorderBrush = "DarkBlue" BorderThickness = "2,2,1,1" CornerRadius = "12" Padding = "2">
                    <TextBlock x:Name = "txt" Margin = "4,0,0,0" FontSize = "15" FontWeight = "Light" Text = "{Binding Path=DisplayName}" />
                </Border>
            </Border>

            <DataTemplate.Triggers>
                <DataTrigger Binding = "{Binding Path=IsCurrentPage}" Value = "True">
                    <Setter TargetName = "txt" Property = "FontWeight" Value = "SemiBold" />
                    <Setter TargetName = "bdInner" Property = "Background" Value = "White" />
                    <Setter TargetName = "bdOuter" Property = "Opacity" Value = "1" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

    </UserControl.Resources>

    <Canvas HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch" Width = "{Binding ActualWidth, ElementName=configuratorControl}" Height = "{Binding ActualHeight, ElementName=configuratorControl}">
        <Canvas x:Name = "searchCanvas" HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch" Panel.ZIndex = "3" Width = "{Binding ActualWidth, ElementName=configuratorControl}" Height = "{Binding ActualHeight, ElementName=configuratorControl}" Visibility = "{Binding SearchBoxVisibility}">
            <Grid Panel.ZIndex = "4" Width = "{Binding ActualWidth, ElementName=searchCanvas}" Height = "{Binding ActualHeight, ElementName=searchCanvas}">
                <StackPanel Panel.ZIndex = "4" Orientation = "Vertical" Width = "270" Height = "70" VerticalAlignment = "Center" HorizontalAlignment = "Center" >
                    <StackPanel Orientation = "Horizontal" >
                        <TextBlock Margin = "5" FontSize = "15"  Text = "Serial Number:" Width = "100" Height = "25" TextAlignment = "Center"  VerticalAlignment = "Center" HorizontalAlignment = "Center" />
                        <TextBox Text = "{Binding MyNumber, UpdateSourceTrigger=PropertyChanged}" Margin = "5" Width = "150" Height = "25" />
                    </StackPanel>
                    <DockPanel HorizontalAlignment = "Stretch">
                        <Button Margin = "5" Content = "Dismiss" Width = "100" HorizontalAlignment = "Left" Command = "{Binding DismissSearchDraftCommand}"/>
                        <Button Margin = "5" Content = "Search" Width = "100" HorizontalAlignment = "Right" Command = "{Binding StartSearchDraftCommand}"/>
                    </DockPanel>
                </StackPanel>
                <Rectangle Panel.ZIndex = "3" Fill = "LightBlue" Width = "300" Height = "100" />
            </Grid>
            <Rectangle Panel.ZIndex = "2" Fill = "LightGray" Opacity = "0.4" Canvas.Left = "0" Canvas.Top = "0" HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch" Width = "{Binding ActualWidth, ElementName=configuratorControl}" Height = "{Binding ActualHeight, ElementName=configuratorControl}" />
        </Canvas>

        <Grid Background = "#11000000" Margin = "1" Panel.ZIndex = "2" IsEnabled = "{Binding GridResultsEnabled}" VerticalAlignment = "Stretch" HorizontalAlignment = "Stretch" Height = "{Binding ActualHeight, ElementName=configuratorControl, Converter = {StaticResource percentageConverter}, ConverterParameter=99.5}" Width = "{Binding ActualWidth, ElementName=configuratorControl, Converter = {StaticResource percentageConverter}, ConverterParameter=99.5}">
                    <Grid.BitmapEffect>
                        <BlurBitmapEffect Radius = "{Binding GridBoxBlur}" KernelType = "Box" />
                    </Grid.BitmapEffect>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width = "220" />
                        <ColumnDefinition Width = "*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height = "*" />
                        <RowDefinition Height = "60" />
                    </Grid.RowDefinitions>

                    <!-- Workflow step listing -->
                    <HeaderedContentControl Header = "{x:Static res:Strings.MyAppView_HeaderSteps}">
                        <ItemsControl ItemsSource = "{Binding Path=Pages}" ItemTemplate = "{StaticResource workflowStepTemplate}" />
                    </HeaderedContentControl>

                    <Button FontSize = "15" Style = "{StaticResource HyperLinkButtonStyle}" Margin = "20,20,20,140"  VerticalAlignment = "Bottom" HorizontalAlignment = "Center" Content = "{x:Static res:Strings.MyAppView_Button_Search_Full}" Command = "{Binding Path=OpenSearchFullCommand}"/>
            <Button FontSize = "15" Style = "{StaticResource HyperLinkButtonStyle}" Margin = "20,20,20,170"  VerticalAlignment = "Bottom" HorizontalAlignment = "Center" Content = "{x:Static res:Strings.MyAppView_Button_Search_Draft}" Command = "{Binding Path=OpenSearchDraftCommand}"/>

                    <Button Margin = "20,295,20,20" Command = "{Binding Path=StartAgainCommand}" Content = "{x:Static res:Strings.SageThreeView_StartAgain}"  VerticalAlignment = "Top" />
                    <Image Grid.Column = "0" Grid.Row = "0" Source = "..\Assets\SplashLogo.png" HorizontalAlignment = "Center" VerticalAlignment = "Bottom" Stretch = "None" Margin = "20,20,20,20"/>

                    <!-- CURRENT PAGE AREA -->
                    <Border Background = "White" Grid.Column = "1" Grid.Row = "0">
                        <ScrollViewer>
                            <HeaderedContentControl Content = "{Binding Path=CurrentPage}" Header = "{Binding Path=CurrentPage.DisplayName}" />
                        </ScrollViewer>
                    </Border>

                    <Border Grid.Column = "0" Grid.Row = "1" Background = "LightGray" Grid.ColumnSpan = "2">

                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width = "Auto" />
                                <ColumnDefinition Width = "*" />
                                <ColumnDefinition Width = "Auto" />
                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>
                                <RowDefinition Height = "*" />
                                <RowDefinition Height = "*" />
                            </Grid.RowDefinitions>

                            <TextBlock Grid.Column = "0" Grid.Row = "1" Grid.ColumnSpan = "5" Margin = "4" FontSize = "15" Text = "{Binding Path=SageThreeStatus}" VerticalAlignment = "Center" Visibility = "{Binding Path=ShowSageThreeStatus}" />

                            <!-- NAVIGATION BUTTONS -->
                            <Grid Grid.Column = "2" Grid.Row = "0" Grid.IsSharedSizeScope = "True" HorizontalAlignment = "Right" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition SharedSizeGroup = "Buttons" />
                                    <ColumnDefinition SharedSizeGroup = "Buttons" />
                                    <ColumnDefinition SharedSizeGroup = "Buttons" />
                                    <ColumnDefinition SharedSizeGroup = "Buttons" />
                                </Grid.ColumnDefinitions>
                                <Button Grid.Column = "1" Grid.Row = "0" Command = "{Binding Path=MovePreviousCommand}" Style = "{StaticResource movePreviousButtonStyle}" />
                                <Button Grid.Column = "2" Grid.Row = "0" Command = "{Binding Path=MoveNextCommand}" Style = "{StaticResource moveNextButtonStyle}" />
                                <Button Grid.Column = "3" Grid.Row = "0" Command = "{Binding Path=CancelCommand}" Style = "{StaticResource cancelButtonStyle}" />

                            </Grid>
                        </Grid>
                    </Border>
                </Grid>


    </Canvas>



</UserControl>

Пропавшее изображение тривиально. Вы не можете просто использовать относительный путь Source = "..\Assets\SplashLogo.png", вам нужно использовать URL-адрес пакета. Например ... stackoverflow.com/questions/5552618/…

Richardissimo 28.10.2018 22:22

Я не могу сказать, что еще есть что - я думаю, вы не дали нам определение сетки верхнего уровня, вероятно, поэтому нижняя часть исчезает. Было бы проще, если бы вы просто дали один кусок XAML, а не множество маленьких кусочков, которые читатель должен был собрать обратно. Вот почему он называется минимальный воспроизводимый пример. Но я бы спросил, действительно ли это то, что вы хотели: <RowDefinition MinHeight = "30" MaxHeight = "60"/>: Я всегда стараюсь избегать жестко запрограммированных размеров и просто позволяю приложению изменять размер самостоятельно. Попробуйте изменить это на <RowDefinition Height = "Auto"/>.

Richardissimo 28.10.2018 22:32
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
102
0

Другие вопросы по теме