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>
Related
I am using WPF split button which is inherited from
xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
The issue is I want to disable , the button ' the one below(Right side of Button 'Conf' in below 'downarrow present in the below fig) , If user clicks on Left side of the button the rightside should be disabled and the button(leftside) background should change to yellow.please find below the xaml , I am using the wpf split button , dropdown content in this case .please let me know if you have any idea
<extToolkit:SplitButton x:Name="ABCbutton"
VerticalAlignment="Center"
Command="{Binding ACommand}"
FontSize="16>
<TextBlock HorizontalAlignment="Center"
IsEnabled="{Binding IsEnabled, ElementName=AButton}"
Text="A"/>
<extToolkit:SplitButton.DropDownContent>
<StackPanel>
<Button Command="{Binding BCommand}"
Padding="3"
Style="{DynamicResource
DropDownButtonMenuButton}">
<TextBlock Margin="0,3,6,3"
Text="B"/>
</Button>
<Button Command="{Binding BCommand}"
Padding="3"
Style="{DynamicResource
DropDownButtonMenuButton}">
<TextBlock Margin="0,3,6,3"
HorizontalAlignment="Stretch"
Text="C"/>
</Button>
</StackPanel>
</extToolkit:SplitButton.DropDownContent>
</extToolkit:SplitButton>
In a case like this, you will likely be better off creating your own control. The split button can't really handle what you are talking about without a good deal of modification.
Essentially your new control will consist of two buttons, visually styled so that they look like they blend together. Each will have it's own background and enabled property. Add a ViewModel to help control behaviors and set properties, and I think you would be in business. Keep in mind that all of the controls that are supplied in any of the toolkits, frameworks, control packs, etc are made with the primitive types of drawing and framework elements (line, rectangle, border, content presenter, panel, etc) with specialized behavior code.
I end up making a lot of custom controls just because there is not one that perfectly replicates what I want.
For our .NET project this year we have to create a website in Silverlight.
Now I have been getting along nicely utilizing the grid, making gridrows and colums, but I have got to the part where I have to create navigation buttons.
So I decided to go for the following look of the buttons:
Now, when I add a button to my project and I give it the background of that image, this happens.
I have looked at other methods to create an image button but those involve putting an image INSIDE the button using a stackpanel. I tried that and it looks really bad.
This is the code the button generated:
<Button Content="Button" Height="40" Name="button1" Width="125">
<Button.Background>
<ImageBrush ImageSource="/OndernemersAward;component/Images/button.png" Stretch="Fill" />
</Button.Background>
</Button>
I don't know what's going on here and I hope somebody can help me.
Thanks, Thomas
Putting an image inside the button is the best way to go. You can just have an image inside a button, or you could put a StackPanel inside and arrange other content as you see fit. You can also get rid of the border and background brushes on the button so that it is just your image and nothing else. Try this code:
<Button Height="40" Name="button1" Width="125" BorderBrush="{x:Null}" Background="{x:Null}" IsHitTestVisible="False">
<Image Source = "/OndernemersAward;component/Images/button.png"/>
</Button>
That will make a button that is just your image with no other borders, or colors. You can tweak the other settings as you see fit. Note that in order to use the image as the button, you have to delete the Content tag, since the inside of the <Button> takes the place of it.
I ultimately solved this by using blent. I created an image and there is a control there that can transform the image to a button.
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
Given the following bit of XAML
<Border Name="Brder" Visibility="Visible" Width="10" Height="10" Background="Red"></Border>
<Button Content="Hide"></Button>
How can I set the button click to change the visibility of the border (not using code behind)?
I know it's trivial in code behind and the routed click event only seems to allow storyboard manipulation?
Thanks
If you change the Button to a ToggleButton you can bind visibility to IsChecked of the ToggleButton using XAML only. Also remember that Expanders support this behavior as well and you can laways style them if you don't like the default look.
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.