ImageBrush control cannot be identified using Coded UI cross hair or Inspect.exe - automation

I am automating a windows 8.1 store app using Coded UI test. I have a Imagebrush control where user image will be loaded on service call. The thing is I cannot identify this control using Coded UI Cross hair/Inspect.exe eventhough it have automation id supplied. But the Image control can be identified.
The below XAML have two border elements and within the 1st border element I am having Imagebrush control and in the next border element I am having image control. Here I can identify the Image control but the Imagebrush control cannot be identified. I tried hand coding also but it did not work.
<Border AutomationProperties.AutomationId="123" Tapped="MyProfile_Tapped">
<Border.Background>
<ImageBrush AutomationProperties.AutomationId="123_4" ImageSource="{Binding Profile.ProfilePhot....... />
</Border.Background>
</Border>
<Border AutomationProperties.AutomationId="1234_5">
<Image AutomationProperties.AutomationId="1234_6" Source="ms-appx:///Assets/Images/WatchAlbumLogo.png" />
</Border>

Related

Why does this XAML behave differently? Elements leaving app window UWP

I have an app with a dropdownbutton flyout. I'm migrating the XAML over to a new project and the dropdownbutton is behaving differently. In the first instance, the dropdown flyout would be alligned to the left edge of the button (what I want it to do). In the second instance, it is aligned to the right edge of the button and contained within the apps window.
XAML
<DropDownButton ToolTipService.ToolTip="File"
VerticalAlignment="Top"
HorizontalAlignment="Left" Background="Transparent"
Style="{StaticResource CommandBarFlyoutEllipsisButtonStyle}"
Height="33"
FontFamily="Segoe MDL2 Assets" Content="">
<DropDownButton.Flyout>
<MenuBarItemFlyout Placement="LeftEdgeAlignedTop">
<MenuFlyoutItem Text="Open File" Icon="OpenFile" Tag="Open File"
Click="OpenLocalFile"/>
</MenuBarItemFlyout>
</DropDownButton.Flyout>
</DropDownButton>
First app (how I want it to look)
Second app
There are a number of differences between the two apps but the xaml is almost identical. I can't seem to pinpoint what could cause this fly out to behave differently. Thanks for any help you can provide!

UWP: Transparent Grid with MapControl beneath is flickering

In my Windows 10 UWP app there is a view, where a MapControl is partially (at the top) covered by a Grid. This Grid has cockpit-like elements in it (e.g. speedometer) and has a semi-transparent background-brush (#CC6A6E4D).
The actual problem is, that this background-brush is flickering, whenever one is interacting with the MapControl. Weird thing about this is, that this issue exclusively works on just one of my three test devices (Lumia 550) and only is present in portrait-mode (but not in landscape-mode).
An example-layout, where I've got that issue would be this:
<Grid>
<maps:MapControl
Name="MainMapControl"/>
<Grid
Height="50"
VerticalAlignment="Top">
<Grid.Background>
<SolidColorBrush Color="#CC6A6E4D" />
</Grid.Background>
</Grid>
</Grid>
Any ideas?

Creating a Hub like a Pivot on WP 8.1

What I'm trying to do was extremely easy in SL/WP 8 but seems to be impossible in WP 8.1 without redefining the Hub template myself. I want to create a hub with a header that:
Scrolls horizontally.
Has a background that scrolls along with it.
Has no margins on either side.
I know this can probably be solved by just having my background image include the background and the hub just being transparent, but I wanted to know if there was a way to solve it in XAML.
Putting a Grid with a background into the Hub's header just highlights the background as much as the hub needs--not stretching all the way across:
<Hub>
<Hub.Header>
<Grid Background="Red" Height="60">
<TextBlock Text="My Header" />
</Grid>
</Hub.Header>
</Hub>
The above makes the header with the text "My Header" but only the text part has a background. Furthermore, the Hub itself seems to have inner margins of 16 on each side so the background doesn't stretch across the whole phone screen.
Should I just be going with a background or deconstructing the template to remove the margins?
Far from an elegant solution but basically I put the background outside the Hub and gave it negative margins like so. Hacky but I guess it works.
<Grid>
<!-- This is the header bar -->
<Grid Height="64" Background="Red" />
<Hub>
<Hub.Header>
<StackPanel Margin="-6,0,0,0">
...
</StackPanel>
</Hub.Header>
<!-- actually just defined the margin in my ResourceDictionary to target all HubSections -->
<HubSection Header="section 1" Margin="-2,-20,-4,8" />
<HubSection Header="section 2" Margin="-2,-20,-4,8" />
</Hub>
</Grid>

Black triangle drawn on grid background instead of grid's contents in WinRT

So I have a grid with a background. Inside the grid is a WebView and then some space on the left hand side of the screen where I have just placed a Button for now.
As the program runs, the left hand bar (that shows the grid with the background and the button laid out on it) doesn't render, instead I get the background, no controls on it and a black triangle (or geometric shape) at the bottom.
I suspect it's an issue with the VM and the video driver. I had a similiar issue with WPF a few years ago and MS's response was that I had an incompatible video driver that was causing the form to not render correctly at all times (this is very much the same behavior).
What can I do to prevent this? I'm including an image.
I'm going to include the small XAML I used and then a screenshot of the behavior (The XAML I rekeyed by hand):
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Media/Background.jpg" />
</Grid.Background>
<TextBlock FontSize="24" Margin="15,15,0,0">Sample Label</TextBlock>
<WebView x:Name="wv1" Margin="250,0,0,0"></WebView>
<Button Content="Do Something" HorizontalAlignment="Left" Height="42" Margin="57,131,0,0" VerticalAlignment="Top" Width="170" Click="Button_Click1" />
</Grid>
VMs don't work well with multimedia. You should expect all sorts of problems with video.

How to synchronize two scroll viewers

I have a custom WPF control to display a list of items using an ItemsControl. The ItemsPresenter is defined in the template to display the list and it is embedded inside a ScrollViewer for scrolling purposes:
<ControlTemplate TargetType="ItemsControl">
<Grid x:Name="LayoutRoot">
<ScrollViewer Margin="3">
<ItemsPresenter/>
</ScrollViewer>
</Grid>
</ControlTemplate>
My application creates two instances of the custom control to show the list side by side.
What I want is when user selects an item on the first one, the second control automatically scrolls so that the same item is displayed in the same position relative to the top. To accomplish this I need to know
How to get the position (in pixels) of the selected item in the first control?
How to scroll to the same position in the second control?
Are there any other ways to do this?