It seems that the WPF Rectangle shape does not have the Click event defined. What am I supposed to use instead?
It does have MouseUp, but it's not quite the same behavior.
If you're not happy with MouseDown and MouseUp, perhaps you could just put the Rectangle in a Button and handle the Button's Click event?
<Button>
<Button.Template>
<ControlTemplate>
<Rectangle .../>
</ControlTemplate>
</Button.Template>
</Button>
It really depends with the behavior you're after. Please elaborate if needs be.
To add click handing to a Rectangle itself, you can use the InputBindings property:
<Rectangle Fill="Blue" Stroke="Black">
<Rectangle.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding FooCommand}"/>
</Rectangle.InputBindings>
</Rectangle>
This will cause the FooCommand to be executed when the rectangle is clicked. Handy if you're using MVVM!
I was looking for the related DoubleClick event and came across this suggestion to simply embed the object of interest in a ContentControl.
Here is their example (with a border, which also did not support click/double click).
<ContentControl MouseDoubleClick="OnDoubleClick">
<Border Margin="10" BorderBrush="Black" BorderThickness="2">
<Grid Margin="4">
<Rectangle Fill="Red" />
<TextBlock Text="Hello" FontSize="15" />
</Grid>
</Border>
</ContentControl>
Rectangle has event Tapped, which works fine. In designing universal apps for Windows 8.1, there are new events. Tapped, DoubleTaped, RightTapped and Holding.
Related
I'm trying to create a small (21 x 21) button that has an image on it. I want all of the normal behavior/effects of a normal button, except the image should take up most of the button's face.
I created the button:
<Button Grid.Column="2" Height="21" Width="21" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{StaticResource CloseButton}"
Height="21" Width="21"
HorizontalAlignment="Center" VerticalAlignment="Center">
</Image>
</Button>
The image ends up squished, it looks like because of the default margin of the button?
I tried this answer which renders correctly, but then I lose the nice mouse-over effects and "click" look of the button.
The image itself is 21x21.
How can I get the effect I'm after?
Try This way, I am having the image and mouse over property in it.
<Button Width="25" Height="25">
<Image Width="21" Height="21" HorizontalAlignment="Center">
<Image.Source>
<BitmapImage UriSource="../images/icon.png"/>
</Image.Source>
</Image>
</Button>
In answer you attached target type of ControlTemplate is missing. It should be:
<ControlTemplate TargetType="{x:Type Button}">
...
</ControlTemplate>
It says your control template to have behavior of control you specify (in this case - Button)
Hope, it helps.
This is more of XAML question for silverlight.
<Mobile:DevicePushpinTemplateSelector
m:MapLayer.Position="{Binding Location}"
ZoomLevel="{Binding ZoomLevel, ElementName=MainMap}"
Content="{Binding}">
<Mobile:DevicePushpinTemplateSelector.DotTemplate>
<DataTemplate>
<Ellipse Width="8" Height="8" Stroke="Black" Fill="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" StrokeThickness="1">
<ToolTipService.ToolTip>
<TextBlock Text="{Binding DisplayId}" />
</ToolTipService.ToolTip>
</Ellipse>
</DataTemplate>
</Mobile:DevicePushpinTemplateSelector.DotTemplate>
<Mobile:DevicePushpinTemplateSelector.NumberedTemplate>
<DataTemplate>
<Border x:Name="border" Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="2" Padding="2" Height="20" CornerRadius="8">
<TextBlock VerticalAlignment="Center" Text="{Binding DisplayId}" />
</Border>
</DataTemplate>
</Mobile:DevicePushpinTemplateSelector.NumberedTemplate>
</Mobile:DevicePushpinTemplateSelector>
On XAML above I have 2 different templates based on map zoom level. When it is zoomed out - it shows smaller ellipse, when user zooms closer - I increase size of pushpin.
2 issues:
WIth a lot of pushpins it get's really slow, I beleive it's due to template selection.
I want it to be different. I want to create "IsSelected" property so all pushpins will be the same on all zoom levels but when user clicks on pushpin - it expands in size.
I wonder how do I code "selection" part. I want only one pushpin to be selected at time. I can bind to property and make pushpin parts visible/invisible but I'm not sure how to code "selection" piece. Should it be Button?
When doing a windows phone app I had the issue of many pins causing "lag" the easiest way around that is to only show pins within a certain radius of the centre of the map and remove the others until they come into the radius.
Cheers
Mark
Below is a very crude start to a thumb template that eventually might look like a respectable popup window. Obviously the user can drag it around from any location therein. Is there any way to make it so it can only be dragged from the top AliceBlue border? Put another way, it is possible to disable dragging from the second border?
<Popup x:Name="MyPopup">
<Popup.Child>
<Thumb DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate>
<StackPanel Margin="20">
<Border Height="20" Width="200" BorderBrush="Black" BorderThickness="2,2,2,0" CornerRadius="3,3,0,0" Background="AliceBlue"></Border>
<Border Height="200" Width="200" BorderBrush="Black" BorderThickness="2,0,2,2" Background="Bisque"></Border>
</StackPanel>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Popup.Child>
</Popup>
I haven't tested this so it's a bit of a guess. Add an event handler to the MouseLeftButtonDown event on AliceBlue Border. In the event handler:-
e.Handled = true;
i am trying to get rid of button border and only display text, however a thin line around the text gets displayed even though i set borderThickness to 0 and borderbrush to transparent.
my xaml code for save button:
<Button Content="save" Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0"/>
Is there anyway i can get rid of the button border?
You need to override the ControlTemplate of the Button:
<Button Content="save" Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Button.Template>
</Button>
The method that I recently found to be most useful for this was to have your button use the style of a toolbars. This will only use the image or text while only showing button borders on mouse over.
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Content="save"
Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0" />
You need to create a new Template for your buttons.
The easiest way to do this is open your project in Expression Blend, select the button and then right click and select "Edit Template > Edit a Copy..". This copies the existing template into one you can modify. It's easier if you create it in a resource dictionary.
Then select the template and on the Resource tab (on the right of the UI) select the ButtonFocusVisual. Select the Properties tab and expand the Miscellaneous section. This has BorderStyle and BorderThickness fields (among others). Set the style to None.
Templates will not solve this problem, your only course of action is to modify the WPF control. The solution is here:
How to remove ButtonChrome border (when defining the template of a border)?
I have a ListBox displaying some items, and in certain modes I "stamp" a kind of watermark across the top of it. I've done this with a Border containing a TextBlock with an Opacity of 0.5. All this works nicely.
However, I still want the user to be able to click on the items in the ListBox but if I click on the "stamp" it obviously eats the click events and they're not seen by the ListBox.
What do I have to do to prevent this? (i.e. allow the ListBox to see the Click event)
Thanks,
Craig
You can do this with the IsHitTestVisible property:
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ListBox>
<ListBoxItem>a</ListBoxItem>
<ListBoxItem>b</ListBoxItem>
<ListBoxItem>c</ListBoxItem>
</ListBox>
<Border Opacity="0.2" Background="Cyan" BorderBrush="Black" BorderThickness="5" IsHitTestVisible="False" >
<TextBlock Text="EXAMPLE" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>