How can you keep focus when pressing a disabled button in a scrolviewer in xaml? - xaml

When creating a default C++ xaml blank app for UWP from visual studio add the following code in the xaml page.
<ScrollViewer>
<StackPanel>
<TextBox Height="20"></TextBox>
<TextBox Height="800"></TextBox>
<Button Content="Enabled" IsEnabled="True"></Button>
<Button Content="Disabled" IsEnabled="False"></Button>
</StackPanel>
</ScrollViewer>
If I put the focus on the Enabled button and after that I press the disabled button the focus shifts to the first TextBox.
I found a workaround, to add a 0 dimension focusable element as the first element of the stack panel. <Button Width="0" Height="0"></Button>
But this will affect the other children. ( The id will be changed by 1 )
Do you know a more elegant way of keeping the focus on the previous element after pressing a disabled button in a panel from a scollviewer?
The behavior is not present if the stackpanel is not in a scrollviewer.

You can programmatically change the app's focus in the ScrollViewer's Tapped event.
In the xaml:
<ScrollViewer Tapped="ScrollViewer_Tapped">
<StackPanel>
<TextBox Height="20"></TextBox>
<TextBox Height="200"></TextBox>
<Button Content="Enabled" x:Name="EnableButton"></Button>
<Button Content="Disabled" IsEnabled="False"></Button>
</StackPanel>
</ScrollViewer>
In the xaml.cpp, handle the ScrollViewer_Tapped event to make the EnableButton get focus.
void CApp::MainPage::ScrollViewer_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::TappedRoutedEventArgs^ e)
{
EnableButton->Focus(Windows::UI::Xaml::FocusState::Programmatic);
}
If you have any other Controls who can get focus, you should also handle their similar event to assign the focus.

Found a solution. On PointerPressed get the current focused element as an UIElement^ and capture the pointer

Related

How to disable a mouse scroll in Avalonia CalendarDatePicker?

I need to disable the mouse scroll functionality of the CalendarDatePicker. So far, I have not found anywhere how I can do this.
<CalendarDatePicker FontWeight="SemiBold" DisplayDateStart="{Binding
Source={x:Static sys:DateTime.Now}, StringFormat=dd/MMM/yyyy}"
SelectedDate="{Binding ExpiredDate}"
IsTodayHighlighted="True" BorderThickness="0"
VerticalContentAlignment="Center" HorizontalAlignment="Center" Background="Transparent"
Watermark="Выберите дату"
IsEnabled="{Binding !Status}"
Grid.Column="1"></CalendarDatePicker>
How can i do this?
I am not aware of the CalendarDatePicker property to disable mouse scroll functionality
Just about to ask the same question! My first approach was to try handling the PointerWheelChanged event, and simply using e.Handled = true; to prevent the event from being fired. For some reason I couldn't get the event to trigger, but this might work for you.
I ended up using a button with a Calender in a flyout, which worked nicely.
<Button Content="{Binding Date, StringFormat='\{0:d\}'}">
<Button.Flyout>
<Flyout>
<Calendar SelectedDate="{Binding Date}"></Calendar>
</Flyout>
</Button.Flyout>
</Button>

How to avoid ListView item losing focus?

I have a UserControl that controls scrolling of a ListView, kind of like a custom ScrollBar. The issue occurs when:
An item in the ListView has keyboard focus (i.e. the focus visual is
set on the item)
I grab and drag my control
Make the release outside of the control (e.g. over the ListView)
Result is that the ListView item loses its focus in the same way it would if I had just clicked outside of the ListView. This is not the way a regular ScrollBar behaves and in fact if I have a Button in my control, click that and make the release outside of the control the Button somehow blocks the release event and the ListView item keeps its focus.
I've tried setting CapturePointer in the PointerPressed handler of my UserControl, but the item still loses focus (although the PointerReleased handler of the ListView isn't called).
UserControl:
<Grid x:Name="RootGrid" Background="AliceBlue">
<Button IsTabStop="False">OKOK</Button>
</Grid>
MainPage:
<Grid x:Name="RootGrid" Background="Gray">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ListView>
<TextBlock Text="ListViewItem 1" />
<TextBlock Text="ListViewItem 2" />
<TextBlock Text="ListViewItem 3" />
</ListView>
<local:MyControl Grid.Row="1" />
</Grid>
So in the above example:
Press tab so that an item in the ListView is marked with the black focus rectangle
Press the blue area with the mouse, drag to gray area and release
Notice how the black focus rectangle disappears. Repeat the steps above but press the Button instead of pressing the blue area and notice how the black focus rectangle doesn't disappear. I want the same behavior when dragging from the blue area as when dragging from the Button.

XAML: MouseLeftButtonUp only fires when clicking text, not whitespace

I have a list box (in Silverlight) that uses a DataTemplate for the ItemTemplate. The DataTemplate is defined like this:
<DataTemplate>
<StackPanel Orientation="Horizontal"
MouseLeftButtonUp="RoleStackPanel_MouseLeftButtonUp"
Tag="{Binding}">
<TextBlock Name="roleItem"
Text="{Binding Path=DisplayValue, Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
I have found that my event RoleStackPanel_MouseLeftButtonUp only fires if any text displayed in the TextBlock is clicked. If the user clicks any whitespace in the item to the right of the text, the event does not fire. So lets say the control is 300px wide but only has the word "Admin" in the item, you MUST click "Admin" and not to the empty whitespace to the right.
How can I make it so the events fires wherever I click in the item, on text or whitespace?
So a couple quick considerations to get you sorted.
a.) The area of your panel does not have HitTestVisibility by default. This is by design and intentional. To get your event to fire for the parent simply add the property of IsHitTestVisible="True" or provide a Brush for the panel via Background="Transparent" to it to invoke HitTestVisibility.
b.) A StackPanel will only consume the space required by its children. If you wish to provide a large area for a user to hit like you describe than swap the StackPanel for Grid which should consume whatever space is made available by its parent. Same rules of HitTestVisibility apply.
<DataTemplate>
<Grid IsHitTestVisible="True"
MouseLeftButtonUp="RoleStackPanel_MouseLeftButtonUp"
Tag="{Binding}">
<TextBlock Name="roleItem"
Text="{Binding Path=DisplayValue, Mode=TwoWay}" />
</Grid>
</DataTemplate>
Hope this helps, cheers!

ScrollViewer still visible when Height is 0

It is easy to reproduce. Just create a new project and paste the following code:
<StackPanel Grid.Row="0" Name="Header" Height="0">
<TextBlock Text="This text is hidden" />
<ScrollViewer>
<TextBlock Margin="2" TextWrapping="Wrap" FontSize="32" Text="This text isn't."/>
</ScrollViewer>
</StackPanel>
The question is the stact panel height is 0 thus the content is supposed to be invisible.
How do I fix it?
Just messing around with the settings.
Found that by adding the CacheMode="BitmapCache" to Stackpanel worked.
Googled it and it seems it is not recommend to do this way considering the performance.
Still looking for the proper answer;)
If you want to make the StackPanel invisible, set Visibility to Collapsed instead. Or you wish to make the ScrollViewer invisible in certain cases?
It sounds like you are trying to make the ScrollViewer and its content disappear when the height of the StackPanel goes to zero. If that is the case, then just trigger off the SizeChanged event of the StackPanel to handle when you should show or hide the Scrollviewer.
private void Header_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (Header.Height.Equals(0))
{
scroller.Visibility = System.Windows.Visibility.Collapsed;
}
else
{
scroller.Visibility = System.Windows.Visibility.Visible;
}
}

Button with image and stackpanel with text misses the mouse click event in Windows Store App?

In my Windows Store App I use a button which has a star shape with some text. I use the following XAML code for the button:
<Button Name="goButton" BorderThickness="0" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-91,33,0" FontSize="25" IsEnabled="True" Click="goButton_Click" >
<Grid Width="227" Height="222">
<Image Source="Assets/redstar.png" />
<StackPanel Orientation="Vertical" Margin="77">
<TextBlock TextAlignment="Center" Text="Tag"></TextBlock>
<TextBlock TextAlignment="Center" Text="ist um!"></TextBlock>
</StackPanel>
</Grid>
</Button>
This is what is the button looks like:
Unfortunately it often happens that clicks in the area of the star are not recognized, e.g. the event handler is not startet. I suppose that it has something to do with the image, for it works fine if I remove the image from the grid. But this doesn't solve my problem.
Any suggestions?
Don't see anything wrong off the top. You could try a couple of things:
Instead of click, try the Tapped event for the button.
Try tapped on the container Grid.
Get rid of the Grid & put all button content in a StackPanel & then try tapped/clicked on it.
Go with patterns like MVVM & associate your button with a Command.
Hope these help!