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" />
Related
I am making a video game and have problem with screen resolutions.
Earlier, a few month ago, I asked very similar question.
Need images with lower resolution "stretched" to screen size
Back then, it seemed the answer I got (using ViewBox) was perfect, but now I am getting problems.
I want every and every image and control in my game to have a few different possible variations fit for resolutions.
For example, if user sets resolution 800x600, all images and buttons are reduced to correct sizes. But I do want my game to be fullscreen only, not windowed.
So, if the resolution is lower then end-user monitor has, all images must be stretched and look "fuzzy". And if higher, part of it must be outside of screen.
For now, my code just sets resolution to end-user monitor, whatever it is. That's absolutely not what I want.
What I get:
A very crude example of what I need:
I'll show xaml as its now. Of course it isn't full, but I'll show the beginning and a few elements, so you'll know how it's built.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Name="wdwMain" x:Class="RealityIncognita.MainWindow"
Height="900" Width="1600" ResizeMode="NoResize" WindowState="Maximized" Cursor="Cross" WindowStyle="None" Loaded="wdwMain_Loaded">
<Viewbox x:Name="viewMain" Stretch="Fill">
<Grid x:Name="areaContainer" HorizontalAlignment="Left" Height="900" VerticalAlignment="Top" Width="1600">
<Grid x:Name="areaMain">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/main_interface.jpg"/>
</Grid.Background>
<Label x:Name="lblTextOutput" Content="Label" HorizontalAlignment="Center" Height="52" Margin="55,726,31,0" VerticalAlignment="Top" Width="1514" FontFamily="Arial" FontSize="22" FontWeight="Bold" HorizontalContentAlignment="Center"/>
<Button x:Name="btnExit" HorizontalAlignment="Left" Height="106" Margin="1464,771,0,0" VerticalAlignment="Top" Width="126" Click="btnExit_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Button.Template>
<ControlTemplate>
<Image Source="/Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Grid x:Name="areaShowers" HorizontalAlignment="Left" Height="700" Margin="1653,790,-1561,-590" VerticalAlignment="Top" Width="1508" IsVisibleChanged="areaShowers_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Rooms/Showers/shower_room.jpg" />
</Grid.Background>
<Button x:Name="objShowersSoap" HorizontalAlignment="Left" Height="29" Margin="613,423,0,0" VerticalAlignment="Top" Width="17" MouseLeave="MouseLeaveAnyObject" RenderTransformOrigin="11.706,1.897" Click="objShowersSoap_Click" MouseEnter="objShowersSoap_MouseEnter">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Rooms/Showers/soap.png" Stretch="Fill" Margin="0,0,0,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Image x:Name="imgShowersOpenMachine" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Source="Resources/Images/Rooms/Showers/drying_machine_open.png" RenderTransformOrigin="0.808,0.471" Stretch="Fill"/>
</Button>
</Grid>
<Grid x:Name="areaLockerRoom" Height="700" VerticalAlignment="Top" Width="1508" IsVisibleChanged="areaLockerRoom_IsVisibleChanged" Margin="1653,17,-1561,0" MouseDown="areaLockerRoom_MouseDown" MouseEnter="areaLockerRoom_MouseEnter" MouseMove="areaLockerRoom_MouseMove">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Rooms/LockerRoom/locker_room_ready.png"/>
</Grid.Background>
<Button x:Name="objLockerRoomCrowbar" Content="" HorizontalAlignment="Left" Height="243" Margin="604,328,0,0" VerticalAlignment="Top" Width="51" MouseEnter="objCrowbar_MouseEnter" Panel.ZIndex="1" Click="objCrowbar_Click" MouseLeave="MouseLeaveAnyObject">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Rooms/LockerRoom/crowbar_only.png" Stretch="Fill" Margin="0,0,0,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="objLockerRoomOdyssey" HorizontalAlignment="Left" Height="53" Margin="797,638,0,0" VerticalAlignment="Top" Width="61" Click="objBookOdyssey_Click" MouseLeave="MouseLeaveAnyObject" MouseEnter="objBookOdyssey_MouseEnter">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Rooms/LockerRoom/img_book_odyssey.png" Stretch="Fill" Margin="0,0,0,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="objLockerRoomEdda" HorizontalAlignment="Left" Height="53" Margin="1335,549,0,0" VerticalAlignment="Top" Width="61" MouseLeave="MouseLeaveAnyObject" Click="objBookEdda_Click" MouseEnter="objBookEdda_MouseEnter">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Rooms/LockerRoom/img_book_edda.png" Stretch="Fill" Margin="0,0,0,0"/>
</ControlTemplate>
</Button.Template>
</Button>
To summarize the structure is like that:
Main Window - Viewbox - areaContainer (main grid) - game areas (grids) - images and buttons for each grid
To summarize:
What I get: game screens are set for end-user monitor resolution.
What I need: game sets all images to specific resolution, makes it "fuzzy" if resolution is LOWER then end-user's, and "cuts" it if it is HIGHER.
Thank you in advance,
Evgenie
ADDED:
If I understand correctly how it works - the container grid that includes all other items should be resized, images should become smaller (by default they are 1600x900), if needed. Then, this container grid must fit user's screen resolution, staying with small images quality.
And to simplify it even more: Can I make large images smaller, then change them to be big again (and lose quality) directly in Visual Studio?
Actually simply adjusting the viewbox did the trick.
<Viewbox x:Name="viewMain" VerticalAlignment="Center" HorizontalAlignment="Center">
And in code, I had to change MaxWidth and MaxHeight, instead of regular ones.
viewMain.MaxWidth = 1024;
viewMain.MaxHeight = 768;
I'm trying to implement a specification for how children of a canvas behave when the canvas has a scale transform applied to it. Specifically for images, I need to support cases where an image maintains it's width and height when it's parent is scaled. As I investigate both Render and Layout scale transforms, it appears that a child is not automatically aware of transforms applied to ancestors and therefor doesn't obey it's stretch rule.
Here is an example in xaml:
<Canvas Background="#99000000">
<Canvas Background="white" Canvas.Left="100" Canvas.Top="100" Width="400" Height="300">
<UserControl x:Name="_panelGreen" RenderTransformOrigin=".5 .5">
<Canvas Background="#FF9ACD32" Width="100" Height="100">
<TextBlock Text="Green Box"></TextBlock>
</Canvas>
</UserControl>
<UserControl x:Name="_panelRed" RenderTransformOrigin=".5 .5">
<UserControl.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="{Binding Path=Value, ElementName=xScale}" ScaleY="{Binding Path=Value, ElementName=yScale}" />
<RotateTransform Angle="{Binding Path=Value, ElementName=Rotate}"/>
<TranslateTransform X="{Binding Path=Value, ElementName=xTranslate}" Y="{Binding Path=Value, ElementName=yTranslate}"/>
</TransformGroup>
</UserControl.RenderTransform>
<Canvas Background="red" Width="100" Height="100">
<Image Source="Error-50.png" Stretch="None" Width="50" Height="50"></Image>
<TextBlock Text="Red Box"></TextBlock>
</Canvas>
</UserControl>
</Canvas>
<StackPanel Canvas.Left="800">
<Label Content="Rotate"></Label>
<Slider Name="Rotate" Margin="10,10,10,0" Minimum="0" Maximum="359" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
<Label Content="X Position"></Label>
<Slider Name="xTranslate" Margin="10,10,10,0" Minimum="0" Maximum="500" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
<Label Content="Y Position"></Label>
<Slider Name="yTranslate" Margin="10,10,10,0" Minimum="0" Maximum="500" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
<Label Content="X Scale"></Label>
<Slider Name="xScale" Margin="10,10,10,0" Minimum="1" Maximum="2" Width="100" TickFrequency=".1" IsSnapToTickEnabled="True"/>
<Label Content="Y Scale"></Label>
<Slider Name="yScale" Margin="10,10,10,0" Minimum="1" Maximum="2" Width="100" TickFrequency=".1" IsSnapToTickEnabled="True"/>
</StackPanel>
</Canvas>
Regardless of whether the transform is render or layout, the image scales when the parent scales.
I wondering if someone has a suggestion for an approach to keeping the image 50x50 during the parent scale. Should I try applying an inverse scale to the image by subscribing to the parent scale's changed event?
The actual rules that govern this system can be more complex than this because I have to make this work with an n-depth tree. I'm trying here to start with the most basic example.
Place two Canvases inside a Grid, placing them overlapped. Place scaleable children into one canvas, and non-scaleable ones into another. Do transform on just the scaleable canvas.
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 have a code like this
<Viewbox Grid.Row="1">
<controls:Tile Name="tileInvoice" Click="tileInvoice_Click" VerticalAlignment="Stretch" ToolTip="{x:Static resx:omniLang.Invoice}">
<controls:Tile.Background>
<ImageBrush ImageSource="Resources/invoice.png" Stretch="Uniform"/>
</controls:Tile.Background>
<TextBlock Name="headerInvoice" Text="{x:Static resx:omniLang.Invoice}" FontSize="22" Foreground="Black" FontWeight="Bold" VerticalAlignment="Center" Margin="0,100,0,0" />
</controls:Tile>
</Viewbox>
I would love to use solid color for background, still using png image on it. I'm so out of the ideas already. Should I use VisualBrush to achieve this?
Clearly, a Background property can only have one value, so you simply can't set two backgrounds to the same property. However, there is nothing to stop you from putting your control into a container control and setting the Background property of that as well:
<Viewbox Grid.Row="1">
<Grid Background="Red"> <!-- Set your solid colour here -->
<controls:Tile Name="tileInvoice" Click="tileInvoice_Click" VerticalAlignment="Stretch" ToolTip="{x:Static resx:omniLang.Invoice}">
<controls:Tile.Background>
<ImageBrush ImageSource="Resources/invoice.png" Stretch="Uniform"/>
</controls:Tile.Background>
<TextBlock Name="headerInvoice" Text="{x:Static resx:omniLang.Invoice}" FontSize="22" Foreground="Black" FontWeight="Bold" VerticalAlignment="Center" Margin="0,100,0,0" />
</controls:Tile>
</Grid>
</Viewbox>
i am new to windows phone development,..
So i am preparing an application in that i given Background Color as white for every page..
in my app i added a search so that user can search data using two text Box..
In that I have given Bg color as white and foreground Color as black.. in that TextBlock is Viable But TextBox are not Visable they are mixing in background...
This is My xaml fiel..
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Margin="10,114,10,311">
<TextBlock Text="Enter Name"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black" />
<TextBox x:Name="Enter Name Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<TextBlock Text="Enter A Model number"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black"/>
<TextBox x:Name="Enter A Model number Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
</StackPanel>
</Grid>
Sorry i want to add a Image Button also i tried....
i want it like this
This may help you.
<Grid Grid.Row="1" Background="White">
<StackPanel Margin="10,114,10,311">
<TextBlock Text="Enter Name"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black" />
<TextBox x:Name="Enter Name Field"
GotFocus="TextBox_GotFocus" BorderBrush="Gray" BorderThickness="2"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<TextBlock Text="Enter A Model number"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black"/>
<TextBox x:Name="Enter A Model number Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus" BorderBrush="Gray" BorderThickness="2"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<Image Height="40" Width="150" Source="your image path" Tap="Image_tap" />
</StackPanel>
</Grid>
add Background="Black" (or whatever color you want) in all your TextBox.
For that what you have shown use BorderBrush="Black", decrease the border thickness if you need to. Yes, you can add a image button, use a image as your button background.
<Button>
<Button.Background>
<ImageBrush Source="your_file.jpg" Stretch="Fill"/>
</Button.Background>
</Button>
Note: It is not a good idea to write x:Name value with spaces. what you write in x:Name ultimately become a variable name of type TextBox (in this case) and c# doesn't permit variable name with space, So just delete the spaces and use x:Name="Enter_A_Model number_Field" or simply x:Name="EnterAModelNumberField"
Use your textbox surrounded with border, since you are using a white background.I think below code may help you to get an idea.
<Border BorderThickness="1" Grid.Row="2" Name="brdUsrName" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="60" Background="Black">
<TextBox Name="txtUserName" Margin="-10,-10,-10,-10" />
</Border>