我尝试在嵌入在flipview中的用户控件中使用VisualStateManager。但是下面的代码不起作用，尽管它看起来像Building adaptive layout with RelativePanel
中提到的那个 <UserControl
x:Class="JintekiArchives.Views.CardDetailsControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:JintekiArchives"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveVisualStateGroup">
<VisualState x:Name="VisualStateNarrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" />
<Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateNormal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="521" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" />
<Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateWide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="descriptionPanel.(RelativePanel.RightOf)" Value="imageBorder" />
<Setter Target="textPanel.(RelativePanel.RightOf)" Value="descriptionPanel" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Margin="20">
<RelativePanel.Background>
<ImageBrush x:Name="backgroundGrid" ImageSource="{Binding FactionImage}" Opacity="0.1" />
</RelativePanel.Background>
<StackPanel x:Name="titlePanel" Orientation="Horizontal" Margin="24"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<TextBlock FontSize="48" FontWeight="SemiBold" Text="{Binding Title}"></TextBlock>
</StackPanel>
<StackPanel Name="imageBorder" Width="300" Height="420" Margin="24, 24"
RelativePanel.Below="titlePanel"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="false">
<Image Source="{Binding ImageSrc}" Stretch="None"/>
</StackPanel>
<StackPanel Name="descriptionPanel" Orientation="Vertical" Margin="24, 24"
RelativePanel.AlignTopWith="imageBorder"
RelativePanel.RightOf="imageBorder">
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock>
<Run FontWeight="Bold" Text="Faction : "></Run>
<Run Text="{Binding Faction}"></Run>
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock>
<Run FontWeight="Bold" Text="Set : "></Run>
<Run Text="{Binding Set}"></Run>
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock>
<Run FontWeight="Bold" Text="Type : "></Run>
<Run Text="{Binding Type}"></Run>
</TextBlock>
</StackPanel>
</StackPanel>
<StackPanel Name="textPanel" Orientation="Vertical" Margin="24,24"
RelativePanel.AlignTopWith="imageBorder"
RelativePanel.RightOf="descriptionPanel">
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock Width="600" TextWrapping="Wrap" TextTrimming="WordEllipsis" Text="{Binding Text}"></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock Width="600" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontStyle="Italic" Text="{Binding Flavor}">
</TextBlock>
</StackPanel>
<StackPanel Padding="5" Orientation="Horizontal" Margin="5">
<TextBlock>
<Run Text="Illustrated by "></Run>
<Run Text="{Binding Illustrator}"></Run>
</TextBlock>
</StackPanel>
</StackPanel>
</RelativePanel>
</Grid>
</UserControl>
答案 0 :(得分：0)
此处的问题与您的布局中Conflicting relationships和$scope.toggleTerritory = function(item, list) {
var idx = list.indexOf(item);
if (idx > -1) {
list.splice(idx, 1);
//How to clear the polygon here
}
else {
list.push(item);
$scope.getTerritory(item);//this creates the polygon
}
};
$scope.drowTerritory={};
$scope.getTerritory= function (territory_id) {
setTimeout(function(){
$scope.drowTerritory= _.find($scope.territory, function(o) {
return o.territory_id === territory_id;
});
console.log("$scope.drowTerritory");
console.log($scope.drowTerritory.geometry);
//Edit Territory
console.log("$scope.drowTerritory");
console.log($scope.drowTerritory.geometry);
var wkt=$scope.drowTerritory.geometry.replace(/, /g, ",");
console.log("wktnewwwww");
console.log(wkt);
var regex = /\(([^()]+)\)/g;
var Rings = [];
var results;
while( results = regex.exec(wkt) ) {
console.log("wkt");
console.log(wkt);
Rings.push( results[1] );
}
var ptsArray=[];
var polyLen=Rings.length;
//now we need to draw the polygon for each of inner rings, but reversed
for(var i=0;i<polyLen;i++){
AddPoints(Rings[i]);
}
poly = new google.maps.Polygon({
paths:ptsArray,
strokeColor: '#1E90FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#1E90FF',
fillOpacity: 0.35,
editable: false,
});
poly.setMap(map);
//function to add points from individual rings
function AddPoints(data){
var pointsData=data.split(",");
var len=pointsData.length;
console.log("len");
console.log(len);
for (var i=0;i<len;i++)
{
var xy=pointsData[i].split(" ");
var pt=new google.maps.LatLng(xy[1],xy[0]);
ptsArray.push(pt);
};
}
},1000);
};
有关。
如果设置多个目标位于元素边缘的关系，则结果可能会在布局中产生冲突关系。发生这种情况时，将按以下优先顺序应用关系：
- 首先应用面板对齐关系（AlignTopWithPanel，AlignLeftWithPanel，...）。
- 同时应用同级对齐关系（AlignTopWith，AlignLeftWith，...）。
- 最后应用同级位置关系（Above，Below，RightOf，LeftOf）。
面板中心对齐属性（AlignVerticalCenterWith，AlignHorizontalCenterWithPanel，...）通常独立于其他约束使用，如果没有冲突则应用。
在评估和应用关系属性后，将应用UI元素上的HorizontalAlignment和VerticalAlignment属性。如果所需大小小于可用大小，这些属性将控制元素在元素可用大小内的位置。
因此RelativePanel的优先级高于AlignTopWith。在您的代码中，您已在Below和RelativePanel.AlignTopWith中将imageBorder设置为descriptionPanel。因此textPanel中descriptionPanel.(RelativePanel.Below)之类的设置无效。
要解决此问题，我建议您删除VisualState和RelativePanel 中descriptionPanel的附加属性，然后将这些附加属性设置为textPanel未使用VisualState。
由于我不确定你想要的布局是什么，所以我只使用两种视觉状态，例如：
AlignTopWith