There is a command property in wpf that I am trying to execute on an image click. I am basically changing the style of a scroller. I downloaded sample styles from here and after changing my style I end up with something like:
ok so let me explain. on the top there is an arrow pointing upwards on top of an image. I plan to get rid of the top arrow but the reason why I need it is because in the xaml it has a command that when clicked it scrolls upward. the code for that up arrow is:
<RepeatButton
Style="{StaticResource ScrollBarButton}"
Margin="0,15,0,0"
VerticalAlignment="Top"
Background="#FFFFFFFF"
Grid.Row="0"
Command="{x:Static ScrollBar.LineUpCommand}" <!-- This is the line that enables to scroll upwards when clicked -->
theme:ScrollChrome.ScrollGlyph="UpArrow"
RenderTransformOrigin="0.5, 0.5">
<RepeatButton.RenderTransform>
<ScaleTransform ScaleX="4" ScaleY="2"/>
</RepeatButton.RenderTransform>
</RepeatButton>
In short I am interested in the following property:
Command="{x:Static ScrollBar.LineUpCommand}"
It would be nice if I could get rid of the top arrow and place that command in the image instead. The problem is that the image control does not have the property command. I know I can make the alpha of the top arrow equal to 0 and make it appear like there is only an image but I am curios of understanding how does this work and moreover I would like to add more functionality such as changing the image appearance on mouse enter etc..
Create a button with control template just having an image and bind to the
Command of the button. More on this can be found here:
Attach ICommand in WPF UserControl
Or try using eventtocommand available in mvvm light tookit
Related
I'm implementing a custom simplified editor in WPF using AvalonEdit and MahApps.Metro. I am stuck trying to get the cut/copy/paste/undo/redo commands working using MahApps.Metro icon/circle buttons instead of a toolbar.
The AvalonEdit sample uses a toolbar, and if I add a similar toolbar to my current application, it works as expected.
I want to call the Cut/Copy/Paste from a series of icon buttons on my app layout instead of inside a toolbar. My MahApps.Metro buttons are as follows. I've tried it with and without the Command Target set. In both cases nothing happens when I click them.
<Button Width="48"
Height="48"
Margin="24,0,0,0"
Style="{DynamicResource MahApps.Metro.Styles.MetroCircleButtonStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="Undo"
CommandTarget="{Binding ElementName=xmlTextEditor.TextArea}">
<iconPacks:PackIconMaterial Kind="UndoVariant" />
</Button>
I'm relatively new to WPF so I might be missing something really basic here. Any help is appreciated.
I'm trying to change an image using events like Click, MouseEnter and MouseLeave. In first place I tried to do it with Buttons in order to have "Click" event too, but I don't know how to remove that lightblue background that appears by default when I put the mouse over the button with a png background.
After this, I tried to use , setting the resource image.png in its Source.
The main problem is that I don't know what to do in code-behind to change between Image Resources in order to change the Source of the control.
I want to know too if I can use a "Click Event" with an control
Update1:
Ok, I tried it by using Binding
For now I think its solved, but I have another problem.
I don't know exactly how to remove that "border". I tried to put the borderbrush property of the buttons to 0, but it seems to be another property or another control.
UI
Thanks.
You can put an image as the content of a button, and add an Click event to that Button. This way, an event gets called when you press the button.
<Button Margin="0,10" Name="mainButton" Click="mainButton_Click">
<Button.Content>
<Image Source="C:/reference-to-image" Height="30"/>
</Button.Content>
</Button>
In the background you can than change the Picture.
This question shows how to do that in the background.
WPF Image UriSource and Data Binding using http:\\ URL
PS. If you want to change the behavior of controls on certain events things like pressing the left mouse button on it, you have to overwrite the event triggers using
<Style TargetType="TextBlock">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
...
Hope this helps.
UPDATE
You can set the BorderThickness to 0 and than set the Value of the Padding Property to 0. The Button Control has a predefined padding value, which makes it look like it has a border.
Padding is the space inside the control and the content e.g the space between the button and the picture
<StackPanel Orientation="Horizontal">
<Button Click="Button_Click" Padding="0" BorderThickness="0">
<Image Source="link-to-pic" Height="100"/>
</Button>
<Button Click="Button_Click" Padding="0" BorderThickness="0">
<Image Source="link-to-pic" Height="100"/>
</Button>
</StackPanel>
I'm creating an application (for a tablet PC) where a user will fill out an inspection form. As a final step, the director must be able to sign it (along with a few other people).
Since I want to keep my form small and concise, I was looking to create a click event on an image control which would pop up my signature canvas window.
XAML Code for my Image control
...
<DockPanel HorizontalAlignment="Stretch" Name="dpDirectorImg" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="8">
<Image Height="Auto" Name="imgDirectorSignature" Stretch="Uniform" Width="Auto" MouseDown="imgDirectorSignature_MouseDown" />
</DockPanel>
...
VB Code
Private Sub imgDirectorSignature_MouseDown(sender As Object, e As System.Windows.Input.MouseButtonEventArgs) Handles imgDirectorSignature.MouseDown
MsgBox("Hello World")
End Sub
For example, in the following screenshot the user would touch / click in the red rectangle (which contains an Image control):
Which would prompt this window:
My problem: I cannot seem to trigger the event on the Image. I have tried TouchDown, MouseDown, StylusDown, GotFocus (with property Focasable set to true) and nothing seems to trigger it.
Well now that we found out what was the problem.
How about you stop using empty images for the future and instead you use Rectangle:
<DockPanel HorizontalAlignment="Stretch" Name="dpDirectorImg" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="8">
<Rectangle MouseDown="imgDirectorSignature_MouseDown" />
</DockPanel>
If the rectangle has any background color by default you can change it to transparent
Background = Transparent
Glad I was able to help you out on this and notice, when Background or Source of an Image is NULL, the hit testing in wpf will not work. That is by design.
Set Background to transparent or any color you like :)
I want a custom Control in WPF which have a appearance similar to HTML, we use for showing Images in the centre of the screen with the whole screen locked and only image is showing.
I dont want to show images, I want to show UserControls within this section.
Can someone give suggestions of this?
In your Window, put all your controls in a single Grid, with a Border control (that contains your image) as the last item in the Grid (which means it will display on top of the other items). Toggle its Visibility via binding or code. Adjust styles as required.
<Window>
<Grid>
<!-- window controls go here --->
<Border Visibility="..." Background="#80000000"> <!-- EDITED -->
<!-- overlaid image (and/or other controls) goes here --->
<Image
Source="..."
Width="..."
Height="..."
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<Grid>
</Window>
In Windows applications this is generally achieved using a modal dialog, i.e. you create a normal WPF window and show it using ShowDialog.
I've used a control template to change the appearance of a button in a trivial way. It now looks different, but does not behave like a button. There are really two problems:
The button's command is never executed
After clicking on the button, it appears selected (i.e., the ellipse turns into an ugly blue rectangle)
Here's the general idea:
<Button Command="{x:Static commands:...}"
CommandParameter="{Binding}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Fill="{Binding ...}"
.../>
</ControlTemplate>
</Button.Template>
</Button>
There's no reason this should be happening. I put together a test using ApplicationCommands.Copy and the command fired just fine. Could be your CommandBinding isn't working properly.
I also didn't see this based on copying your sample XAML and just setting Fill="Green". You can try setting FocusVisualStyle="{x:Null}" on the Button.
The problem turned out to be that Fill was bound to a value that could be null. If the Fill brush is null rather than transparent, then there's nothing to click and the command doesn't get executed. As Drew mentioned, with a solid fill, the button works correctly.
Takeaway lesson: if you want to hide your shape but still have it respond to user interaction, use a transparent brush, not a null brush.
I had a similar problem with a custom templated button:
<my:UniButton Command="{Binding MyCommand}"/>
The binding didn't work until adding a RelativeSource:
<my:UniButton Command="{Binding MyCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=my:CustomPanel}}"/>
where CustomPanel is a control where my button lies.
Withal I had a simple button on the same panel, but it worked fine even without RelativeSource.