display a message when the application is resized - xaml

Question

I am new in universal apps World with C#,I have tried to make my interface responsive and to get this message when the screen is less than 600 :
is it possible to do that with triggers?
thanks for help

Answer 1

You can directly use XAML in windows 10. Just specify an gridInstruction with your design and set its visibility as collapsed. Now use adaptive triggers based on screen width to set its visibility visible or collapsed.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="gridInstruction.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="gridInstruction.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Answer 2

You can create a custom StateTrigger for this:
public enum LayoutStateType
{
TooSmall, BigEnough
}
public class LayoutTrigger : StateTriggerBase
{
public static readonly DependencyProperty MinimalStateWidthProperty = DependencyProperty.Register("MinimalStateWidth", typeof(double), typeof(LayoutTrigger), new PropertyMetadata(600.0, OnTriggerPropertyChanged));
public static readonly DependencyProperty LayoutStateProperty = DependencyProperty.Register("LayoutState", typeof(LayoutStateType), typeof(LayoutTrigger), new PropertyMetadata(LayoutStateType.Landscape, OnTriggerPropertyChanged));
public LayoutTrigger()
{
Window.Current.SizeChanged += Window_SizeChanged;
UpdateTrigger();
}
public double MinimalStateWidth
{
get
{
return (double)GetValue(MinimalStateWidthProperty);
}
set
{
SetValue(MinimalStateWidthProperty, value);
}
}
public LayoutStateType LayoutState
{
get
{
return (LayoutStateType)GetValue(LayoutStateProperty);
}
set
{
SetValue(LayoutStateProperty, value);
}
}
private static void OnTriggerPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var trigger = d as LayoutTrigger;
trigger.UpdateTrigger();
}
private void Window_SizeChanged(object sender, WindowSizeChangedEventArgs e)
{
UpdateTrigger();
}
private void UpdateTrigger()
{
switch (LayoutState)
{
case LayoutStateType.TooSmall:
if (Window.Current.Bounds.Width <= MinimalStateWidth)
{
SetActive(true);
}
else
{
SetActive(false);
}
break;
case LayoutStateType.BigEnough:
default:
if (Window.Current.Bounds.Width > MinimalStateWidth)
{
SetActive(false);
}
else
{
SetActive(true);
}
break;
}
}
}
You can use this state trigger to set visual states.
XAML usage:
<Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="DefaultLayout">
<VisualState.StateTriggers>
<triggers:LayoutTrigger LayoutState="TooSmall" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="PortraitLayout">
<VisualState.StateTriggers>
<triggers:LayoutTrigger LayoutState="BigEnough" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid Style="{StaticResource LayoutRootStyle}">
In the 'too small' visual state, hide whatever you want to hide and show your message