[英]AdaptiveTrigger and DataTemplate
Will AdaptiveTrigger work in a DataTemplate? AdaptiveTrigger 会在 DataTemplate 中工作吗?
That's my code i'm using to customize my ShellNavigation, it is working fine except the visual states.这是我用来自定义我的 ShellNavigation 的代码,除了视觉状态外,它工作正常。 They will not trigger anything.
他们不会触发任何事情。
<shell:ShellHeadView x:Key="ShellHeadView_01">
<shell:ShellHeadView.ContentTemplate>
<DataTemplate>
<Grid Margin="20,0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="GreenBackgroundVisualState">
<VisualState.Setters>
<Setter Target="headViewLeft.Background" Value="Green" />
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1000"/>
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="OrangeBackgroundVisualState">
<VisualState.Setters>
<Setter Target="headViewLeft.Background" Value="Orange" />
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="2000"/>
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="RedBackgroundVisualState">
<VisualState.Setters>
<Setter Target="headViewLeft.Background" Value="Red" />
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="3000"/>
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="headViewLeft" Width="100" Height="90">
</Grid>
Try wrapping your DataTemplate
inside a UserControl
like this - 尝试像这样将
DataTemplate
包装在UserControl
-
<DataTemplate>
<UserControl>
<Grid>
<VisualStateManager.VisualStateGroups>
...
</Grid>
</UserControl>
</DataTemplate>
Looks like any Control
that has got a Content
property will work. 看起来任何具有
Content
属性的Control
都可以使用。 That's why UserControl
works, so does a ContentControl
. 这就是
UserControl
起作用的原因, ContentControl
。
So if you replace the UserControl
with a ContentControl
and give it an empty Style
. 因此,如果将
UserControl
替换为ContentControl
并为其提供一个空的Style
。 It should work too. 它也应该工作。
<Style x:Key="EmptyContentControlStyle" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl" />
</Setter.Value>
</Setter>
</Style>
<DataTemplate>
<ContentControl Style="{StaticResource EmptyContentControlStyle}">
<Grid>
<VisualStateManager.VisualStateGroups>
...
</Grid>
</ContentControl>
</DataTemplate>
Create two data templates.创建两个数据模板。 Use the adaptive trigger to change the
ItemTemplate
on your ItemsControl
使用自适应触发器更改
ItemsControl
上的ItemTemplate
TBH it feels a bit weird to me to put adaptive triggers inside a generic template, rather than in the page view. TBH 将自适应触发器放在通用模板中而不是页面视图中对我来说感觉有点奇怪。
In general I would heavily recommend against putting user controls inside datatemplates as is suggested in another answer.一般来说,我强烈建议不要像另一个答案中建议的那样将用户控件放在数据模板中。 User controls are SLOW, so having them in templates that are used over and over again can be bad for performance (custom controls with control templates are a better alternative for that).
用户控件很慢,因此将它们放在反复使用的模板中可能对性能不利(带有控件模板的自定义控件是更好的选择)。
You could also create a custom control that switches between templates.您还可以创建一个在模板之间切换的自定义控件。 Example:
例子:
public class AdaptiveControl : ContentControl
{
public AdaptiveControl()
{
SizeChanged += AdaptiveControl_SizeChanged;
}
private void AdaptiveControl_SizeChanged(object sender, SizeChangedEventArgs e)
{
Update();
}
private void Update()
{
if (ActualWidth < Size)
ContentTemplate = SmallTemplate;
else
ContentTemplate = LargeTemplate;
}
public double Size
{
get { return (double)GetValue(SizeProperty); }
set { SetValue(SizeProperty, value); }
}
public static readonly DependencyProperty SizeProperty =
DependencyProperty.Register(nameof(Size), typeof(double), typeof(AdaptiveControl), new PropertyMetadata(200d, (s, e) => ((AdaptiveControl)s).Update()));
public DataTemplate SmallTemplate
{
get { return (DataTemplate)GetValue(SmallTemplateProperty); }
set { SetValue(SmallTemplateProperty, value); }
}
public static readonly DependencyProperty SmallTemplateProperty =
DependencyProperty.Register(nameof(SmallTemplate), typeof(DataTemplate), typeof(AdaptiveControl), new PropertyMetadata(null, (s, e) => ((AdaptiveControl)s).Update()));
public DataTemplate LargeTemplate
{
get { return (DataTemplate)GetValue(LargeTemplateProperty); }
set { SetValue(LargeTemplateProperty, value); }
}
public static readonly DependencyProperty LargeTemplateProperty =
DependencyProperty.Register(nameof(LargeTemplate), typeof(DataTemplate), typeof(AdaptiveControl), new PropertyMetadata(null, (s, e) => ((AdaptiveControl)s).Update()));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.