C# 宽度变小时，VisualStateManager不会在UWP中隐藏控件

我以前在UWP应用程序中使用过VisualStateManager隐藏（折叠）图像控件，所以我知道它可以工作。但在下面的一个例子中，情况并非如此。我无法理解为什么当我将页面拉得越来越宽时，大图像（称为imgCarDetail）不会消失并重新出现。我认为这可能与数据绑定有关，但我看不出这会产生什么影响

欢迎提出任何建议

MainPage.xaml

<Page
x:Class="StackoverflowExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:StackoverflowExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:StackoverflowExample.Classes"
SizeChanged="Page_SizeChanged"
Loaded="Page_Loaded"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!-- Adjust controls on the page based on the size of the screen -->
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="vsSmallPhone">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="10" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <!--<Setter Target="lblManufacturerName.FontSize" Value="12" />-->
                    <Setter Target="imgCarDetail.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="vsPhone">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="500" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="lblManufacturerName.FontSize" Value="18" />
                    <Setter Target="imgCarDetail.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="vsTablet">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="lblManufacturerName.FontSize" Value="24" />
                    <Setter Target="imgCarDetail.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="vsDesktop">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1024" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="lblManufacturerName.FontSize" Value="32" />
                    <Setter Target="imgCarDetail.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid Name="tblPage" Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" x:Name="RowOne" />
            <RowDefinition Height="*" x:Name="RowTwo" />
            <RowDefinition Height="165" x:Name="RowThree" />
            <RowDefinition Height="308" x:Name="RowFour" />
        </Grid.RowDefinitions>

        <TextBlock Name="LabelPageSize" Text="size_here" Grid.Row="0" Margin="5" />

        <!-- List of all of the car makers -->
        <ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1">
            <ListView Name="lvwMaster" ItemsSource="{x:Bind colAllCarMakers}" IsItemClickEnabled="True" ItemClick="lvwMaster_ItemClick">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="data:Manufacturer">
                        <TextBlock Name="lblManufacturerName" FontSize="32" Text="{x:Bind Name}" TextWrapping="Wrap" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ScrollViewer>

        <!-- List of the cars built by the selected car maker -->
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" Grid.Row="2">
            <GridView Name="grdAllCars" ItemsSource="{x:Bind colAllCars}" IsItemClickEnabled="True" ItemClick="grdAllCars_ItemClick" Margin="5,5,5,10" >
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="data:Car">
                        <Image Name="imgCarThumbnail" Source="{x:Bind CarImage}" Width="100" Height="149"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </ScrollViewer>

        <!-- Car details for a selected Car -->
        <Grid Grid.Row="3" HorizontalAlignment="Left" VerticalAlignment="Top" Name="tblCarDetails" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Image Name="imgCarDetail" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Top" Width="200" Height="298"/>

            <TextBlock Name="lblCarDetailID" TextWrapping="Wrap" Grid.Row="0" Grid.Column="1" Margin="10,0,10,0" Text="car_id"/>
            <TextBlock Name="lblCarDetailName" FontSize="32" Grid.Row="1" Grid.Column="1" Margin="10,0,10,10" Text="Car name" TextWrapping="Wrap"/>
        </Grid>
    </Grid>
</Grid>

制造商.cs

using System.Collections.Generic;

namespace StackoverflowExample.Classes {
public class Manufacturer {
    public int ManufacturerID { get; set; }
    public string Name { get; set; }
    public List<Car> Cars { get; set; }

    public Manufacturer() {
        this.Cars = new List<Car>();
    }
}
}

使用System.Collections.Generic；
命名空间StackoverflowExample.Classes{
公共类制造商{
public int-ManufacturerID{get；set；}
公共字符串名称{get；set；}
公共列表车辆{get；set；}
公共制造商（）{
this.Cars=新列表（）；
}
}
}

CarManager.cs

using System;
using System.Collections.ObjectModel;
using System.Threading.Tasks;

namespace StackoverflowExample.Classes {
public class CarManager {

    public static async Task GetManufacturers(ObservableCollection<Manufacturer> colCarMakers) {
        try {
            Manufacturer makerAudi = new Manufacturer { ManufacturerID = 10, Name = "Audi" };
            makerAudi.Cars.Add(new Car { CarID = 111, Model = "A3" });
            makerAudi.Cars.Add(new Car { CarID = 112, Model = "A4" });
            makerAudi.Cars.Add(new Car { CarID = 113, Model = "A5" });

            Manufacturer makerFord = new Manufacturer { ManufacturerID = 11, Name = "Ford" };
            makerFord.Cars.Add(new Car { CarID = 114, Model = "Focus" });
            makerFord.Cars.Add(new Car { CarID = 115, Model = "Mustang" });
            makerFord.Cars.Add(new Car { CarID = 116, Model = "Bronco" });

            Manufacturer makerVW = new Manufacturer { ManufacturerID = 12, Name = "Volkswagen" };
            makerVW.Cars.Add(new Car { CarID = 117, Model = "Golf" });
            makerVW.Cars.Add(new Car { CarID = 118, Model = "Jetta" });
            makerVW.Cars.Add(new Car { CarID = 119, Model = "Beetle" });

            Manufacturer makerTesla = new Manufacturer { ManufacturerID = 13, Name = "Tesla" };
            makerTesla.Cars.Add(new Car { CarID = 120, Model = "Model 3" });
            makerTesla.Cars.Add(new Car { CarID = 121, Model = "Model S" });
            makerTesla.Cars.Add(new Car { CarID = 122, Model = "Model X" });

            Manufacturer makerHyundai = new Manufacturer { ManufacturerID = 14, Name = "Hyundai" };
            makerHyundai.Cars.Add(new Car { CarID = 123, Model = "Accent" });
            makerHyundai.Cars.Add(new Car { CarID = 124, Model = "Elantra" });
            makerHyundai.Cars.Add(new Car { CarID = 125, Model = "Sonata" });

            Manufacturer makerMINI = new Manufacturer { ManufacturerID = 15, Name = "MINI" };
            Manufacturer makerChevrolet = new Manufacturer { ManufacturerID = 16, Name = "Chevrolet" };
            Manufacturer makerBMW = new Manufacturer { ManufacturerID = 17, Name = "BMW" };
            Manufacturer makerChrysler = new Manufacturer { ManufacturerID = 18, Name = "Chrysler" };
            Manufacturer makerLexus = new Manufacturer { ManufacturerID = 19, Name = "Lexus" };
            Manufacturer makerMercedes = new Manufacturer { ManufacturerID = 20, Name = "Mercedes" };
            Manufacturer makerPorsche = new Manufacturer { ManufacturerID = 21, Name = "Porsche" };

            colCarMakers.Add(makerAudi);
            colCarMakers.Add(makerFord);
            colCarMakers.Add(makerVW);
            colCarMakers.Add(makerTesla);
            colCarMakers.Add(makerHyundai);
            colCarMakers.Add(makerMINI);
            colCarMakers.Add(makerChevrolet);
            colCarMakers.Add(makerBMW);
            colCarMakers.Add(makerChrysler);
            colCarMakers.Add(makerLexus);
            colCarMakers.Add(makerMercedes);
            colCarMakers.Add(makerPorsche);
        } catch (Exception) {
            //
        }
    }
}
}

使用系统；
使用System.Collections.ObjectModel；
使用System.Threading.Tasks；
命名空间StackoverflowExample.Classes{
公共类管理器{
公共静态异步任务GetManufacturers（ObservableCollection制造商）{
试一试{
制造商makerAudi=新制造商{ManufacturerID=10，Name=“Audi”}；
添加（新车{CarID=111，Model=“A3”}）；
makerAudi.Cars.Add（新车{CarID=112，Model=“A4”}）；
makerAudi.Cars.Add（新车{CarID=113，Model=“A5”}）；
制造商makerFord=新制造商{ManufacturerID=11，Name=“Ford”}；
添加（新车{CarID=114，Model=“Focus”}）；
添加（新车{CarID=115，Model=“Mustang”}）；
添加（新车{CarID=116，Model=“Bronco”}）；
制造商makerVW=新制造商{ManufacturerID=12，Name=“Volkswagen”}；
添加（新车{CarID=117，Model=“Golf”}）；
添加（新车{CarID=118，Model=“Jetta”}）；
添加（新车{CarID=119，Model=“甲壳虫”}）；
制造商makerTesla=新制造商{ManufacturerID=13，Name=“Tesla”}；
添加（新车{CarID=120，Model=“Model 3”}）；
添加（新车{CarID=121，Model=“Model S”}）；
添加（新车{CarID=122，Model=“Model X”}）；
制造商makerHyundai=新制造商{ManufacturerID=14，Name=“现代”}；
makerHyundai.Cars.Add（新车{CarID=123，Model=“Accent”}）；
makerHyundai.Cars.Add（新车{CarID=124，Model=“Elantra”}）；
makerHyundai.Cars.Add（新车{CarID=125，Model=“Sonata”}）；
制造商makerMINI=新制造商{ManufacturerID=15，Name=“MINI”}；
制造商makerChevrolet=新制造商{ManufacturerID=16，Name=“Chevrolet”}；
制造商makerBMW=新制造商{ManufacturerID=17，Name=“BMW”}；
制造商makerChrysler=新制造商{ManufacturerID=18，Name=“Chrysler”}；
制造商makerLexus=新制造商{ManufacturerID=19，Name=“Lexus”}；
制造商makerMercedes=新制造商{ManufacturerID=20，Name=“Mercedes”}；
制造商makerPorsche=新制造商{ManufacturerID=21，Name=“Porsche”}；
Colraudi汽车制造商；
Colfarmers.Add（makerFord）；
Colcarmoschers.Add（makerVW）；
添加（makerTesla）；
Col汽车制造商。添加（makerHyundai）；
添加（makerMINI）；
添加（makerChevrolet）；
Colcarmotors.Add（makerBMW）；
Colcarmotors.Add（makerChrysler）；
科尔汽车制造商公司（makerLexus）；
添加（makerMercedes）；
添加（makerPorsche）；
}捕获（例外）{
//
}
}
}
}

问题在于每个setter的第一行：

中断所有设定器的工作。这是因为您试图访问DataTemplate中的控件—您想更改哪些项？一个，两个，或者全部——我想是全部，但程序不知道

要使代码正常工作，您需要做两件事——从主页中的所有setter中去掉上面提到的行——这将使AdaptiveTrigger正常工作。然后，要更改lblManufacturerName.FontSize，您必须修改数据模板以使用触发器。接下来，您必须将其包装在UserControl（或其他包含

内容的控件）中。正如我所测试的，类似这样的东西应该可以工作：


using System.Collections.Generic;

namespace StackoverflowExample.Classes {
public class Manufacturer {
    public int ManufacturerID { get; set; }
    public string Name { get; set; }
    public List<Car> Cars { get; set; }

    public Manufacturer() {
        this.Cars = new List<Car>();
    }
}
}

using System;
using System.Collections.ObjectModel;
using System.Threading.Tasks;

namespace StackoverflowExample.Classes {
public class CarManager {

    public static async Task GetManufacturers(ObservableCollection<Manufacturer> colCarMakers) {
        try {
            Manufacturer makerAudi = new Manufacturer { ManufacturerID = 10, Name = "Audi" };
            makerAudi.Cars.Add(new Car { CarID = 111, Model = "A3" });
            makerAudi.Cars.Add(new Car { CarID = 112, Model = "A4" });
            makerAudi.Cars.Add(new Car { CarID = 113, Model = "A5" });

            Manufacturer makerFord = new Manufacturer { ManufacturerID = 11, Name = "Ford" };
            makerFord.Cars.Add(new Car { CarID = 114, Model = "Focus" });
            makerFord.Cars.Add(new Car { CarID = 115, Model = "Mustang" });
            makerFord.Cars.Add(new Car { CarID = 116, Model = "Bronco" });

            Manufacturer makerVW = new Manufacturer { ManufacturerID = 12, Name = "Volkswagen" };
            makerVW.Cars.Add(new Car { CarID = 117, Model = "Golf" });
            makerVW.Cars.Add(new Car { CarID = 118, Model = "Jetta" });
            makerVW.Cars.Add(new Car { CarID = 119, Model = "Beetle" });

            Manufacturer makerTesla = new Manufacturer { ManufacturerID = 13, Name = "Tesla" };
            makerTesla.Cars.Add(new Car { CarID = 120, Model = "Model 3" });
            makerTesla.Cars.Add(new Car { CarID = 121, Model = "Model S" });
            makerTesla.Cars.Add(new Car { CarID = 122, Model = "Model X" });

            Manufacturer makerHyundai = new Manufacturer { ManufacturerID = 14, Name = "Hyundai" };
            makerHyundai.Cars.Add(new Car { CarID = 123, Model = "Accent" });
            makerHyundai.Cars.Add(new Car { CarID = 124, Model = "Elantra" });
            makerHyundai.Cars.Add(new Car { CarID = 125, Model = "Sonata" });

            Manufacturer makerMINI = new Manufacturer { ManufacturerID = 15, Name = "MINI" };
            Manufacturer makerChevrolet = new Manufacturer { ManufacturerID = 16, Name = "Chevrolet" };
            Manufacturer makerBMW = new Manufacturer { ManufacturerID = 17, Name = "BMW" };
            Manufacturer makerChrysler = new Manufacturer { ManufacturerID = 18, Name = "Chrysler" };
            Manufacturer makerLexus = new Manufacturer { ManufacturerID = 19, Name = "Lexus" };
            Manufacturer makerMercedes = new Manufacturer { ManufacturerID = 20, Name = "Mercedes" };
            Manufacturer makerPorsche = new Manufacturer { ManufacturerID = 21, Name = "Porsche" };

            colCarMakers.Add(makerAudi);
            colCarMakers.Add(makerFord);
            colCarMakers.Add(makerVW);
            colCarMakers.Add(makerTesla);
            colCarMakers.Add(makerHyundai);
            colCarMakers.Add(makerMINI);
            colCarMakers.Add(makerChevrolet);
            colCarMakers.Add(makerBMW);
            colCarMakers.Add(makerChrysler);
            colCarMakers.Add(makerLexus);
            colCarMakers.Add(makerMercedes);
            colCarMakers.Add(makerPorsche);
        } catch (Exception) {
            //
        }
    }
}
}