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.
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 have an image that I want various parts of to be clickable. I found a comment in the question below mentioning this was possible with Expression Designer. I haven't been able to find a guide on how to do this. I understand that I have to export the image from Designer to Visual Studio. Is there a better way of achieving this or how do I go about creating the xaml for these clickable sections?
best way for clickable image map in wpf
Personally I'd use the second answer to that question i.e. do something like this:
<Canvas>
<Image Source="background.png"/>
<Ellipse Canvas.Left="82" Canvas.Top="88" Width="442" Height="216" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_1"/>
<Ellipse Canvas.Left="305" Canvas.Top="309" Width="100" Height="50" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_2"/>
</Canvas>
Then you can drag and resize the shapes in DevStudio using it's XAML editor's design mode.
I have program in which I have lots of buttons. Each of button has background set as
<Button x:Name="mybutton" HorizontalAlignment="Left" Height="30" Margin="76,110,0,0" VerticalAlignment="Top" Width="25" Click="some_click">
<Button.Background>
<ImageBrush ImageSource="Resource/button_picture.png"/>
</Button.Background>
</Button>
Image is showing as background in .xaml when program not running but when i run application image is not there as background of button. How do i debug this background in button ? Is there any goofy error that is there?
Let's make sure we have the following properties set right in your scenario
1) Build Action -> Resource
2) Copy to Output Directory -> Do not copy
3) Instead of using the relative path for image source, try using a full path to the image like this (I say this because I don't know where the image resource is located in your project, using relative path is perfectly normal in WPF)
<Image Source="pack://application:,,,/AssemblyNameContainingImageResource;component/Resource/button_picture.png" />
You need to change the code like this
<Button x:Name="mybutton" HorizontalAlignment="Left" Height="30" Margin="76,110,0,0" VerticalAlignment="Top" Width="25" Click="some_click">
<Image Source="Resource/button_picture.png"/>
</Button>
Change the Build Action of button_picture.png to Resource if it is content. Also check the Copy to output directory property value
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