I'm trying to create a Image which is focusable in order to show moving or resize thumb.I know that Image tag is not a control so it is not focusable which explained in this Image Documentation. But I need to make some event to allow the image to know whether is being Focus in order to change the visibility of those control thumbs.Does anyone know how to solve this problem?
My control in Canvas is following.
<Canvas x:Name="test">
<Grid x:Name="grdTextbox" Canvas.Left="300" Canvas.Top="300" Height="200" Width="200" ManipulationMode="None">
<Thumb x:Name="ThumbMove" Background="Transparent" Height="Auto" Width="Auto" DragDelta="ThumbMove_DragDelta" PointerEntered="ThumbMove_PointerEntered" PointerExited="ThumbMove_PointerExited" Margin="5" Canvas.ZIndex="1" />
<Thumb x:Name="ThumbBottomRight" Background="White" BorderBrush="Black" Height="20" Width="20" HorizontalAlignment="Right" DragDelta="ThumbBottomRight_DragDelta" VerticalAlignment="Bottom" PointerEntered="ThumbSizeNorthwestSoutheast_PointerEntered" PointerExited="ThumbMove_PointerExited"/>
<Thumb x:Name="ThumbBottomLeft" Background="White" BorderBrush="Black" Height="20" Width="20" HorizontalAlignment="Left" DragDelta="ThumbBottomLeft_DragDelta" VerticalAlignment="Bottom" PointerEntered="ThumbSizeNortheastSouthwest_PointerEntered" PointerExited="ThumbMove_PointerExited"/>
<Thumb x:Name="ThumbTopRight" Background="White" BorderBrush="Black" Height="20" Width="20" HorizontalAlignment="Right" DragDelta="ThumbTopRight_DragDelta" VerticalAlignment="Top" PointerExited="ThumbMove_PointerExited" PointerEntered="ThumbSizeNortheastSouthwest_PointerEntered"/>
<Thumb x:Name="ThumbTopLeft" Background="White" BorderBrush="Black" Height="20" Width="20" HorizontalAlignment="Left" DragDelta="ThumbTopLeft_DragDelta" VerticalAlignment="Top" PointerExited="ThumbMove_PointerExited" PointerEntered="ThumbSizeNorthwestSoutheast_PointerEntered"/>
<Image Height="Auto" Width="Auto" Source="Assets/Square150x150Logo.png" Margin="2" Stretch="Uniform" PointerEntered="ThumbMove_PointerEntered" PointerExited="ThumbMove_PointerExited" Tapped="Image_Tapped"/>
</Grid>
</Canvas>
A very nice description of enabling keyboard accessibility including focus is in the UWP documentation.
As it states:
In cases where an element that you want to use in the UI cannot have focus, you could create your own custom control. You must set the IsTabStop property to true to enable focus and you must provide a visual indication of the focused state by creating a visual state that decorates the UI with a focus indicator.
So what you could do is to wrap the Image in a custom control which handles the focus.
The documentation however also says that:
It is often easier to use control composition so that the support for
tab stops, focus, and Microsoft UI Automation peers and patterns are
handled by the control within which you choose to compose your
content.
So if you want to aim for the solution with better pre-implemented support, you could just wrap your Image in an existing control like Button:
<Button>
<Image />
</Button>
The advantage is that the behavior of focus is already implemented fully out of the box. The disadvantage is that the Button does much more than just focusing, of course, and you will probably have to modify the default style to remove the styling you don't need.
Related
I have a listbox with the following structure. Data displays well and no issues there. I want to get some animation affect for the StackPanel, but since it is inside the DataTemplate, I am not able to use Blend to get my desired animation affect.
I guess I can write an event handler and code for that, but is that the best approach of achieving animation for ListBox items?
<ListBox Height="600" ItemsSource="{StaticResource learn}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="100" Orientation="Horizontal">
<TextBlock Width="0" Text="{Binding ID}" />
<Image Height="100" Width="100"/>
<StackPanel Orientation="Vertical" Width="319" VerticalAlignment="Center">
<TextBlock TextWrapping="Wrap" Text="{Binding Text}" Margin="6,0,0,0" FontSize="29.333" />
<TextBlock TextWrapping="Wrap" Text="{Binding Description}" Margin="6,0,0,0" FontSize="16"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Okay, all you need to do is to create a new user control and add all your animations to that user control and start animation where you want. In the list box data template, create an instance of that data template.
Steps to reproduce:
Create a new User Control in the project.
Give in the animations to the animations to that user control in blend.
Add the user control in data template.
Start the animations where ever you want.
Alternative: Without creating a new user control you can specify animations by creating storyboard and applying required transformations. this gives a common animation to all the list box items.
In my application i am using a content control to display my user control
<ContentControl Content="{Binding LayoutControl}" Grid.Row="0" Height="700" Width="450"/>
In here the binding content is a user control with the following elements.
<Grid x:Name="LayoutRoot" Background="#6C7172">
<Border BorderBrush="White" BorderThickness="7">
<Image Source="{Binding ImagePath0}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding Path=ImageTap}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</Border>
</Grid>
In the above code what i am tried to implement is, while tapping on the image i need to fire the corresponding event in my view model, But through this code the tap event is not firing. But when i apply the interactivity to content control the click is working. I cannot simply add tap event to content control because some other cases i need to handle tap events of more than two Image controls . Can any one help me to solve this issue.
Give a fixed height and width to you image control and then try. It will work. If there is no image in the container means, the mouse will not get a position for tapping. Try this and if you still face the same issue give me a feedback.
I am trying to do a simple example of the typical slider.value binded to a textblock. I have tried to maintain it so simple that I cannot find what would be the problem here.
I have this simple XAML code and NO code behind:
<phone:PhoneApplicationPage
.......
.......
.......
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Slider x:Name="mySlider" />
<TextBlock Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" />
</Grid>
</phone:PhoneApplicationPage>
With this code, the slider movement is locked. If I remove the TextBlock binding then all works fine (but no value on TextBlock, of course) :-)
It seems so simple that I know something very, very stupid is locking my brain.
I have tried the 'Binding' in anyway you can imagine, but no luck at the moment.
Any help and any explanation, please ?
Try setting maximum and minimum properties on your slider.
OK, try a stackpanel for your layout:
<StackPanel x:Name="LayoutRoot" Background="White">
<Slider x:Name="mySlider" />
<TextBlock Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" Height="30" />
</StackPanel>
I think the issue is that your controls are sitting on top of each other.
I have a design issue with my listbox on my view.
Currently it has following DataTemplate as ItemTemplate:
<DataTemplate x:Key="MovieItemTemplate">
<StackPanel>
<Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="5" Margin="3" Height="215" Width="140">
<Image x:Name="MovieCover"
toolkit:TiltEffect.IsTiltEnabled="True"
Margin="0"
HorizontalAlignment="Center"
Width="140"
Height="210">
<Image.Source>
<BitmapImage UriSource="{Binding Cover}" CreateOptions="BackgroundCreation"/>
</Image.Source>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="Tap">
<gsextra:EventToCommand Command="{Binding MainViewModel.MovieItemSelectedCommand, Source={StaticResource Locator}}"
PassEventArgsToCommand="True"
CommandParameter="{Binding MovieID}"
></gsextra:EventToCommand>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</Image>
</Border>
</StackPanel>
</DataTemplate>
So as you can see, I have an image inside it that will download his content from the internet through an URI. Thanks to the new mango option BackgroundCreation ( cfr. http://blogs.msdn.com/b/slmperf/archive/2011/06/13/off-thread-decoding-of-images-on-mango-how-it-impacts-you-application.aspx ) it load in background.
But I have a very large collection and even though I do 'paged' binding of the Listbox Source, I notice my memory keeps on going up, until it has consumed everything and the app crashes.
Then, I noticed this http://blog.wpfwonderland.com/2011/01/17/images-and-memory-leaks-in-windows-phone-7/ so it would seem I need to cleanup the image itself, because of the image caching feature in wp7.
When I do this, everything works great in reference to memory, BUT now each time the user 'pages' through the listbox the images need to be redownloaded, resulting in an app that is almost not usable... because the user keeps on waiting for those images.
Any tips/tricks on how to go about this?
I also tried the DefferedLoadListBox
I want to put the one image on left corner and another on right corner of Control(ex :button) and need click event for that.
please tell me....
What have you tried?
Something like this should work but it depends on exactly what you're after:
<Button Click="myClickHandler">
<Grid>
<Image Source="image1.jpg" HorizontalAlignment="Left" Stretch="None" />
<Image Source="image2.jpg" HorizontalAlignment="Right" Stretch="None" />
</Grid>
</Button>
Disclaimer: the above is untested and written freehand. I make no guarantees of it compiling, etc.