I cannot find the background-Image Property in the properties panel of the button, I have the images stored for each button in the root directory of my solution as Jpegs, the project is a WPF and I don't know how to set the image in the XAML or C# code. I am developing in Visual Studio 2017 Community Edition
All problems I have seen before are for different versions of Visual Studio, so I can't find the answer
*edit - i am trying to change the background image of a button at design time in the XAML editor, not create an onclick button to change a background image. So if i have this button in XAML:
<Button x:Name="keyBtn"
Content="Keyboard/Mouse"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0"/>
Which Part should I refer to in the ".background" property?
It is probably easier than you think..
Try this after you add the image to your project.
<Button x:Name="keyBtn"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0">
<Image Source="myImage.png" />
</Button>
Note that you need to remove the content since now the image is the content.
If you wish the text as well - you can try this:
<Button x:Name="keyBtn"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0">
<Grid>
<Image Source="myImage.png" Stretch="Fill" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Keyboard/Mouse" />
</Grid>
</Button>
And there is another option - which might be exactly what you are looking for:
<Button x:Name="keyBtn"
Content="Keyboard/Mouse"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Margin="0,-31,0,0">
<Button.Background>
<ImageBrush ImageSource="myImage.png" Stretch="Fill" />
</Button.Background>
</Button>
But in that last option - you will have to remove the Background color as it is being replaced by the image.
In my WPF program, I want to draw a shape. Then after I press a button, the program plays a video in fullscreen mode. I can't seem to make the video play in fullscreen on the canvas.
my XAML is like below
<Canvas>
<Ellipse Name="face1" Panel.ZIndex="2" Fill="Green" Width="400" Height="400" />
<MediaElement Panel.ZIndex="1000" Name="videoControl1" Stretch="Fill"
Source="C:\Users\videos\carcrash.mp4"
LoadedBehavior="Manual" MediaEnded="videoControl1_MediaEnded">
</MediaElement>
</Canvas>
As you can see, I put the video in front of my shape. as sson as a button is pressed, I then start to play the video. So the video will be in front of the shape. The problem is that the video is very small. How to make it full screen?
Per Dennis Cheng's comment here:
Canvas is a "no-layout" panel so children won't size to parent. Try
Grid if you want children fill or manually Bind to the parent's size
if you must use a Canvas:
<Canvas x:Name="MyCanvas"
Width="300"
Height="300">
<Ellipse Name="face1"
Width="400"
Height="400"
Panel.ZIndex="2"
Fill="Green" />
<MediaElement Name="videoControl1"
Width="{Binding RelativeSource={RelativeSource Self},
Path=Parent.ActualWidth}"
Height="{Binding RelativeSource={RelativeSource Self},
Path=Parent.ActualHeight}"
Panel.ZIndex="1000"
Source="C:\Users\videos\carcrash.mp4" />
</Canvas>
That scales the video's width to that of the containing Canvas, but it remains in proportion to its original dimensions.
If you use a Grid you can achieve the kind of scaling you're aiming for:
<Grid Width="500" Height="500">
<Ellipse Name="face1"
Width="400"
Height="400"
Panel.ZIndex="2"
Fill="Green" />
<MediaElement Name="videoControl1"
Grid.Row="0"
Panel.ZIndex="1000"
Source="D:\Downloads\The.Strain.S01E13.HDTV.x264-LOL.mp4"
Stretch="Fill" />
</Grid>
I have a problem in resizing the main window of my app.xaml form: after resizing it, the objects (buttons,combo boxes, textboxes, etc) inside the form are being resized, hidden or moved to another place in the form. I just want to resize the main window not the other objects. in the other words, I want to unlink these two (main window & other objects) from each other. after doing that, I can resize main window and then, manually move the objects to their new place in the form. the code of the form is given below.
<Window x:Class="WPFClient.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="550" Width="834" MaxHeight="550" MaxWidth="834" MinHeight="550" MinWidth="834">
<Grid>
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="LightSlateGray" Offset="0"/>
<GradientStop Color="White" Offset="0.5"/>
<GradientStop Color="LightSlateGray" Offset="0.9"/>
</LinearGradientBrush>
</Grid.Background>
<Label x:Name="loginLabelUName" Height="25" HorizontalAlignment="Left" Margin="179,200,0,0" VerticalAlignment="Top" Width="70">User Name:
</Label>
<TextBox x:Name="loginTxtBoxUName" Height="23" Margin="277,200,313,0" VerticalAlignment="Top" />
<Label x:Name="loginLabelIP" HorizontalAlignment="Left" Margin="179,232,0,255" Width="70">Service IP:</Label>
<TextBox x:Name="loginTxtBoxIP" Margin="277,232,313,0" Text="41.235.135.104" Height="23" VerticalAlignment="Top" />
<Button x:Name="loginButtonConnect" Background="Transparent" Margin="277,0,313,222" Click="buttonConnect_Click" Height="23" VerticalAlignment="Bottom">Connect</Button>
<Label x:Name="loginLabelStatus" Height="44" VerticalAlignment="Bottom" FontFamily="Jokerman" FontSize="20" Foreground="White" HorizontalAlignment="Right" Width="167" Margin="0,0,40,71">Offline</Label>
<ComboBox x:Name="loginComboBoxImgs" HorizontalAlignment="Right" Margin="0,200,197,222" Width="98" Background="Transparent" />
<Label x:Name="loginLabelTitle" Height="57" FontFamily="Jokerman" FontSize="25" Foreground="White" Margin="16,16,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="293">WCF / WPF Chat App.</Label>
<Polyline x:Name="loginPolyLine" StrokeThickness="2" Stroke="White" Points="140,90 140,300 700,300 700,90 140,90" Margin="-9,42,116,165" />
<ListBox x:Name="chatListBoxMsgs" Margin="10,62,167,84" />
<ListBox x:Name="chatListBoxNames" HorizontalAlignment="Right" Margin="0,62,10,84" Width="139" />
<CheckBox x:Name="chatCheckBoxWhisper" Height="15" HorizontalAlignment="Right" Margin="0,37,10,0" VerticalAlignment="Top" Width="120" Foreground="White" FontSize="12">Whisper Mode</CheckBox>
<TextBox x:Name="chatTxtBoxType" Height="39" Margin="10,0,313,9" VerticalAlignment="Bottom" />
<Button x:Name="chatButtonSend" Click="chatButtonSend_Click" Height="39" Margin="0,0,167,9" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="136">Send</Button>
<Button x:Name="chatButtonDisconnect" Click="chatButtonDisconnect_Click" Height="39" HorizontalAlignment="Right" Margin="0,0,10,9" VerticalAlignment="Bottom" Width="139">Disconnect</Button>
<Image x:Name="chatCurrentImage" HorizontalAlignment="Left" Margin="10,0,0,0" Stretch="Fill" Width="60" Height="70" VerticalAlignment="Top" />
<Label x:Name="chatLabelCurrentUName" Height="23" HorizontalAlignment="Left" Margin="87,10,0,0" VerticalAlignment="Top" Width="85" Foreground="White"></Label>
<Label x:Name="chatLabelCurrentStatus" Height="23" Margin="87,37,0,0" VerticalAlignment="Top" Foreground="Green" HorizontalAlignment="Left" Width="85"></Label>
<Label x:Name="chatLabelWritingMsg" Height="30" Margin="10,0,167,49" VerticalAlignment="Bottom" Foreground="Gray"></Label>
<Button x:Name="chatButtonSendFile" Click="chatButtonSendFile_Click" Background="Transparent" Height="23" Margin="270,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="105">Send File</Button>
<Label x:Name="chatLabelSendFileStatus" Height="28" Margin="270,32,316,0" VerticalAlignment="Top"></Label>
<Button x:Name="chatButtonOpenReceived" Click="chatButtonOpenReceived_Click" Background="Transparent" Height="23" Margin="382,10,313,0" VerticalAlignment="Top">Open Received Files</Button>
</Grid>
</Window>
The reason why this is occurring is because you are explicitly setting Margin properties on your elements.
Margin="277,232,313,0"
These margins are relative to the parent Grid. So the code above says:
Place the element 277 from the left, 232 from the top, 313 from the right and 0 from the bottom.
Therefore, when the Grid gets resized, these margins will be recalculated, and thus, screw up the positioning of the elements.
To combat this, you should look into using relative positioning. There is already an answer to this question here.
I found a simple solution.when I select an object like button or ..., a small link icon(similar to above Hyperlink icon) appears on each edge of the object (or on grids around it). by clicking on these icons, you can change them into Unlinked or Linked situation. now when you want to resize the main window, you should do the following:
1. move all the objects to the new place you want in the form.
2. select the objects one after another and click on link icon at the side that you want to decrease the main window's width or height from that side.for example, if you want to decrease the width/height of the window from right/down side, you should unlink every "right/down" side link icon.
3. resize the width or height of main window by dragging its edge according to the 2nd step example. you can see that resizing window does not affect other objects at all.
I would like to create a toolbar like this on wpf.
What i need to use in order to create the area with the button circled in red ?
Is it possible with the microsoft toolbar ?
For the moment i tried this :
Here is my xaml code :
<ToolBarTray Background="#008ede" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="33" >
<ToolBar ToolBarTray.IsLocked="True" Background="#008ede" HorizontalAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Center">
<Button Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center">
<Image Source="_XWPF_TBR_PREMIER.PNG_IMAGES.png" Name="Image1"></Image>
</Button>
<Button Name="tbrClear_" ToolTip="Clear" VerticalAlignment="Center" VerticalContentAlignment="Center">
<Image Source="_XWPF_TBR_PRECED.PNG_IMAGES.png" Name="Image2"></Image>
</Button>
</ToolBar>
</ToolBarTray>
1) First, i would like to know how centered the button, i add the verticalAlignment="Center", but nothing is center. Have you an idea please?
2) Secondly, how remove or hide the little rectangle white on the right please ?
3) Then, anyone know how it's possible to recreate the area circled on red please ?
Thanks a lot :)
Best regards
Your tool bar looks centered. do you mean you want the toolbar to be where the caption/title is or do you want to hide the caption title? for the latter you can try WindowStyle="None" in your window.
As for for the 'little rectangle" try getting and setting OverflowGrid visibility property of the toolbar.
you probably also need to wrap the elments in aborder and use the corner radius to achieve the rounded corners. here's an example:
<DockPanel Height="40" VerticalAlignment="Top">
<Border BorderBrush="LightBlue" BorderThickness="1" CornerRadius="8" Margin="1" Background="#008ede">
<ToolBarTray Background="#008ede" HorizontalAlignment="Left" VerticalAlignment="Center" >
<ToolBar ToolBarTray.IsLocked="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Center">
<Button Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center">
<Image Source="_XWPF_TBR_PREMIER.PNG_IMAGES.png" Name="Image1"></Image>
</Button>
<Button Name="tbrClear_" ToolTip="Clear" VerticalAlignment="Center" VerticalContentAlignment="Center">
<Image Source="_XWPF_TBR_PRECED.PNG_IMAGES.png" Name="Image2"></Image>
</Button>
</ToolBar>
</ToolBarTray>
</Border>
</DockPanel>
I'm working on building a diagnostic reader for my car. I can parse the messages from my OBD port but I want to create a display that is better than just a text readout. I want a graphical display of my car that will highlight the affected areas of the diagnostics. So if the tire pressure is low I want the tires on a picture of the car to turn red. I want to develop this in C# since that is what I'm the most familiar with. Any suggestions on what might be the best way to do this? It would also be nice if the method scaled with resizing the window.
<Image x:Name ="Bubble" Height="445" HorizontalAlignment="Left" Margin="42,12,0,0" Stretch="Fill" VerticalAlignment="Top" Width="654" Source="/WpfApplication1;component/Images/bubble.png" Panel.ZIndex="0" Opacity="1"/>
<Image x:Name="Smiley" Height="445" HorizontalAlignment="Left" Margin="42,12,0,0" Stretch="Fill" VerticalAlignment="Top" Width="654" Source="/WpfApplication1;component/Images/bubble.png" Panel.ZIndex="1" Opacity="0"/>
<Button Content="Button" Height="35" HorizontalAlignment="Left" Margin="10,46,0,0" Name="button1" VerticalAlignment="Top" Width="24" Click="button1_Click" />
<Button Content="Button" Height="50" HorizontalAlignment="Left" Margin="14,118,0,0" Name="button2" VerticalAlignment="Top" Width="22" Click="button2_Click" />
And then to change the opacity.
Bubble.Opacity = 0.0;
Smiley.Opacity = 1.0;
One way of doing this is having multiple images, and fading the opacity. You just need to make sure the image format supports transparency (png-s do nicely). Let's say you have a car image, and separate overlays for front and rear wheel. Keeping all images the same size for easy alignment.
You'll get something like
<Image x:Name="car" Source="car.png" Panel.ZIndex="0"/>
<Image x:Name="frontwheel" Source="frontwheel.png" Panel.ZIndex="1" Opacity="0"/>
<Image x:Name="rearwheel" Source="readwheel.png" Panel.ZIndex="2" Opacity="0"/>
Then in the code
frontwheel.Opacity=1.0;
Edit: here's a snippet from some code of mine. I add graphics to the canvases in the code-behind
<Grid Margin="20">
<Image Name="image1" Width="640" Height="640"
Opacity="{Binding Path=Value, ElementName=OpSlider}"
HorizontalAlignment="Center"
/>
<Canvas Name="MarkerLayer"
Opacity="{Binding Path=Value, ElementName=DotOverlaySlider}"
/>
<Canvas x:Name="Squares"
Opacity="{Binding Path=Value, ElementName=OverlayOpSlider}"
/>
</Grid>
Opacity here is bound to sliders
<Slider x:Name="OpSlider" Width="150" SmallChange="0.05" Maximum="1" Value="0.5" />
<Slider x:Name="OverlayOpSlider" Width="150" SmallChange="0.05" Maximum="1" Value="1" />
<Slider x:Name="DotOverlaySlider" Width="150" SmallChange="0.05" Maximum="1" Value="0.8" />