What is the difference between a button with an Image as its ControlTemplate, and an Image with a PointerPressed event handler?
You can set up event handlers for both for when you click on them, so what is the difference, or pros/cons for each?
Here's the Button code:
<Button Click="Button_Click">
<Button.Template>
<ControlTemplate>
<Image Source="pic.jpg"/>
</ControlTemplate>
</Button.Template>
</Button>
Here's the Image code:
<Image Source="pic.jpg" PointerPressed="Image_PointerPressed"/>
A Button has states, whereas an image can have event handlers but was not specifically designed to be an input. See also different images for enable and disable states of a button in WPF
Related
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
I create a ink toolbar, and the initial controls are all except pens.
I can set the eraser button's background as transparent, but apply to the ruler button.
Is this a ink toolbar bug?
<InkToolbar Background="Transparent" InitialControls="AllExceptPens" TargetInkCanvas="{x:Bind inkCanvas}">
<InkToolbarEraserButton Background="Transparent"/>
<InkToolbarRulerButton Background="Transparent"/>
</InkToolbar>
The rule button is actually the InkToolbarStencilButton in the visual tree, not InkToolbarRulerButton. So that update your code snippet as follows will work.
<InkToolbar
Background="Transparent"
InitialControls="AllExceptPens"
<InkToolbarEraserButton Background="Red" />
<!--<InkToolbarRulerButton Background="Red" Foreground="Blue" />-->
<InkToolbarStencilButton Background="Red"></InkToolbarStencilButton>
</InkToolbar>
I am develop na UWP app, and I would like to have a transparent button. I try this (Is a simple example of my button):
<Button Name="Button"
Opacity="0">
<Image Source="/Assets/image.png"/>
</Button>
I want a button with an image, in which only the button is transparent. I've tried it that way, and by putting: Opacity="0" it puts everything transparent, and I want it to just be transparent.
Method 1
Set Opacity="0" for Button.Background. You can do it by using below code.
<Button>
<Button.Background>
<SolidColorBrush Opacity="0"/>
</Button.Background>
</Button>
Method 2
Set #00000000 as the background color of the Button. Since UWP support ARGB(Alpha RGB) color you can directly set opacity for any color in UWP app.
<Button Background="#00000000"/>
I have the following UWP XAML:
<Button Content="Scan"
Command="{Binding CommandScan}" ToolTipService.ToolTip="Scan"
Style="{StaticResource ButtonIconStyle}">
<Button.Template>
<ControlTemplate TargetType="Button">
<resources:ScanIcon />
</ControlTemplate>
</Button.Template>
</Button>
ScanIcon is a user control that contains a vector image. What seems to be happening is that the icon is masking the clickable button area - that is, I can click in the drawn area of the icon only, the background of the button (whilst still within the border of the button) is not clickable.
So, my questions are: What is causing this behaviour, and how can I override it?
You can try to leave Button ControlTemplate alone and insert your image into Background of Button. I mean - you don't have to shoot big guns when you simple want to override style. If you need the Button to be exactly the shape of the image you can try DrawingBrush as described here: Painting with Images, Drawings, and Visuals
Below is code for my button, so what properties should I add to make button invisible but content must be visible.
<Button x:Name="PART_PreviousButton"
DockPanel.Dock="Left"
Content="<"
Focusable="False"
Opacity="0" />
You need to edit the button Template to have this kind of result.
This link explains it pretty well, the easiest way is to do it with blend: http://msdn.microsoft.com/en-us/library/bb613598.aspx