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
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>
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
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
I am trying to create a simple image viewer in silverlight.
my code is this:
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Margin="0" Padding="0" Width="300" Height="300">
<Canvas Width="600" Height="400" Margin="0">
<Image Source="/MapViewer;component/Images/imageFileName.jpg" Stretch="None" Margin="0,0,90,5"></Image>
</Canvas>
</ScrollViewer>
(I used the Canvas because in the future I would like to paint more fixed elements on the image, such as lines, polylines, etc)
This code is working ok except the fact that the ScrollViewer cuts the image: say the image is 800x600, than I can view around 700x500. I dont know if that was clear enough, so I will add a picture:
(this is the original image)
(and this is the picture, as viewed in my application)
As you can see, I cannot view the bottom right corner of the image... can somebody please tell me how to fix this?
It is not the scroll viewer cropping your image, it is the fixed-size canvas where you placed it. If you want your entire image to be visible you need to set the canvas size to be exactly the same size as your image.