ToggleMenuFlyoutItem Text change based on Checked? - xaml

Question

I've added a
ToggleMenuFlyoutItem Text="Sales Tax Exempt" Click="btnTaxExempt_Click"
and instead of the check mark when on and the no check mark when off, I want to change the Text to read "Tax Exempt On" or "Tax Exempt Off". How do I do this?

Answer 1

You could update the ToggleMenuFlyoutItem styles and templates to hide the CheckGlyph FontIcon to Collapsed and update the text code behind as you want. For example:
XAML
<Style x:Key="ToggleMenuFlyoutItemStyle1" TargetType="ToggleMenuFlyoutItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleMenuFlyoutItem">
<Grid x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
<Grid x:Name="AnimationRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FontIcon x:Name="CheckGlyph" Visibility="Collapsed" Foreground="{ThemeResource ToggleMenuFlyoutItemCheckGlyphForeground}" FontSize="16" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="" Margin="0,0,12,0" Opacity="0" Width="16"/>
<TextBlock x:Name="TextBlock" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Text}" TextTrimming="Clip" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ToggleMenuFlyoutItem Text="Sales Tax Exempt" Click="btnTaxExempt_Click" Style="{StaticResource ToggleMenuFlyoutItemStyle1}" ></ToggleMenuFlyoutItem>
Code behind:
private void btnTaxExempt_Click(object sender, RoutedEventArgs e)
{
ToggleMenuFlyoutItem current = sender as ToggleMenuFlyoutItem;
if(current.IsChecked)
{
current.Text = "Tax Exempt On";
}
else if(!current.IsChecked)
{
current.Text = "Tax Exempt Off";
}
}
The ToggleMenuFlyoutItem should be used inside MenuFlyout, if you are not use a MenuFlyout, you may consider to use ToggleSwitch instead. ToggleSwitch is easy to set OnContent and OffContent .