How to make TextBlock selectable in Flyout (XAML)? - xaml

My XAML code:
<AppBarButton>
<AppBarButton.Flyout>
<Flyout>
<TextBlock Text="Text is not selectable here" IsTextSelectionEnabled="True"/>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
Despite I set IsTextSelectionEnabled - the text is not selectable in Flyout.
Is it possible to make the text selectable ? I tried RichTextBlock - it doesn't work as well.

You could try to set AllowFocusOnInteraction property as true on the AppBarButton to get focus.
<AppBarButton AllowFocusOnInteraction="True">
<AppBarButton.Flyout>
<Flyout>
<TextBlock Text="Text is not selectable here" IsTextSelectionEnabled="True"/>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>

Related

How to attach Flyout to MenuFlyoutItem?

XAML code:
<Page.TopAppBar>
<CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
<AppBarButton AutomationProperties.Name="Sample Button"
AutomationProperties.AutomationId="SampleAppBarButton"
Click="AppBarButton_Click">
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem x:Name="MuteMenu" Icon="Mute" Text="Mute" Click="MuteMenu_Click">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBlock Text="Some text..."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</MenuFlyoutItem>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
</CommandBar>
</Page.TopAppBar>
C++/CX:
void App2::DirectXPage::MuteMenu_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
FlyoutBase::ShowAttachedFlyout((FrameworkElement^)sender);
}
But ShowAttachedFlyout not working - flyout is not appearing when I click menu item. No errors reported.
Creating and attaching flyout programmatically doesn't work as well.
Target version is 10.0.18362.0.
Visual Studio 2019 (v142).
flyout is not appearing when I click menu item
By testing your code, the flyout doesn't appear is because after the MenuFlyoutItem is clicked, the entire MenuFlyout will be hidden, the Flyout inside it can't appear.
You can try to use MenuFlyoutSubItem which contains a cascading list of menu items.
<Page.TopAppBar>
<CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
<AppBarButton AutomationProperties.Name="Sample Button"
AutomationProperties.AutomationId="SampleAppBarButton"
x:Name="MyAppButton" >
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutSubItem x:Name="MuteMenu" Icon="Mute" Text="Mute">
<MenuFlyoutItem Text="Some Text..."></MenuFlyoutItem>
<MenuFlyoutItem Text="123"></MenuFlyoutItem>
</MenuFlyoutSubItem>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
</CommandBar>
</Page.TopAppBar>
Or you can add a Button.Flyout and include the menuFlyout in the Button.Flyout.
<Page.TopAppBar>
<CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
<AppBarButton x:Name="button" >
<AppBarButton.Flyout>
<Flyout>
<StackPanel>
<Button>
<StackPanel Orientation="Horizontal">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""></FontIcon>
<TextBlock>Mute</TextBlock>
</StackPanel>
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Some text..."></MenuFlyoutItem>
</MenuFlyout>
</Button.Flyout>
</Button>
</StackPanel>
</Flyout>
</AppBarButton.Flyout>
</CommandBar>
</Page.TopAppBar>

How to add a button into a textblock in UWP?

I want to add a Button in a Textblock. I mean, Buttons(Objects) among Text.
The code below does not work.
<TextBlock>
<Button />
</TextBlock>
TextBlock seems to support only text, so which control should I use?
You can't display anything but text in a TextBlock. If you want to display a Button in some running text you could for example use a StackPanel:
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some text with a " /><Button Content="Button" VerticalAlignment="Center" /><TextBlock Text="in it." />
</StackPanel>

Where has TextBlock Background property gone in UWP?

I need to change the Background of a TextBlock in UWP but the Background property no longer exists. What is the solution for this?
This don't work...
<TextBlock Text="Exceptions Log"
FontSize="10"
Background="Red" // This is invalid
/>
Thanks
Just put it inside a Grid or a Border or something else...
<Border Background="Red">
<TextBlock Text="Exceptions Log"
FontSize="10" />
</Border>

Can't lower Radio Button Width

I have a windows phone project and I can't resize the radio button width. Which is pushing my textblock off screen.
Here is my Xaml code:
<StackPanel x:Name="spRadioSelection" Orientation="Horizontal" Margin="0,100" HorizontalAlignment="Stretch">
<TextBlock Text="Staging" FontSize="24" Margin="30,20"></TextBlock>
<RadioButton x:Name="rbStaging" GroupName="ProductionLevel" IsChecked="true" Checked="SelectionChangedHandler" Width="68"/>
<RadioButton x:Name="rbLive" GroupName="ProductionLevel" IsChecked="false" Checked="SelectionChangedHandler"></RadioButton>
<TextBlock Text="Live" FontSize="32" Margin="30,20"></TextBlock>
</StackPanel>
And it looks like this:
You can change the MinWidth rather than Width
<RadioButton x:Name="rbStaging" GroupName="ProductionLevel"
IsChecked="true" Checked="SelectionChangedHandler" MinWidth="68" />
Probably need to reduce the Margins on the TextBlock as well. Hope that helps

Windows Phone - ToggleSwitch in LongListSelector (not changing when scrolling)

This is my LongListSelector in my page.xaml:
<phone:LongListSelector Name="ModuleList"
Margin="0,0,0,0"
Padding="0,0,0,0"
Style="{StaticResource LLSFloatingScrollbarStyle}"
ItemTemplate="{StaticResource ModuleListTemplate}"
ItemsSource="{Binding Modules}"/>
My template:
<DataTemplate x:Key="ModuleListTemplate">
<StackPanel Margin="{Binding StackModuleMargin}">
...
<toolkit:ToggleSwitch x:Name="LockSwitch"
Grid.Row="2" Margin="0,4,0,-26" Padding="0"
Content="" SwitchForeground="{StaticResource TrackitoOrange}"
IsChecked="{Binding IsToggleCheck, Mode=TwoWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<Command:EventToCommand Command="{Binding DataContext.LockSwitchTapCommand, ElementName=LayoutRoot}"
CommandParameter="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</toolkit:ToggleSwitch>
...
The problem is that click is raised when I just scroll with list. Yes I have my finger in place where is toggle but I want to fix it when I scroll then toggle shoudn't be changed. Thanks
There's a probably a design issue you should explore if you have two competing tap events in your UI.
That said, you could override OnScroll and mark the event as handled at the original level so it doesn't bubble up to your toggle button.