Develop Reference

How to show relative source image on WPF hosted by WinForm Project without modifying behind code?

I made WinForm project and add ElementHost for using WPF blend effect on some Images.
ElementHost m_host = new ElementHost();
WPF_TK4S wpfTK4S = new WPF_TK4S();
m_host.Child = wpfTK4S;
m_host.Size = new Size(1000, 1000);
m_host.Location = new Point(0, 0);
this.Controls.Add(m_host);
I added the image control on WPF user control like below.
<UserControl x:Class="Test.WPF_TK4S"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="1000" d:DesignWidth="1000">
<Grid>
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<Image Source="/Resources/TK4S_254X253.png" HorizontalAlignment="Left" Height="344" Margin="48,44,0,0" VerticalAlignment="Top" Width="342" Stretch="None"/>
</Grid>
The image is shown well on control view but is now shown when I run the application.
Fortunately, after I changed the source uri into absolute uri like
"D://Visual Project/Test/Test/Resources/TK4S_254X253.png"
the image is shown well!!
I tried to use all kinds of relative uri like
".../Test/Resources/TK4S_254X253.png", "pack://application:,,,/TK4S_254X253.png"
but it is not work.
I need to use relative path because the project is operating on Server so every project paths are different. And I have to use this things on xaml because I have to use blend after the image is initialized.
Does anything I need to know other option?

Loading a grid in xaml code from a file, then making it active in main code

I am making a video game, where each grid serves as game room. Each grid\room has a large number of objects like things that can be used, images and sound files. Until now, they all were stored in one large file. But now, I was told that this approach wastes a lot of resources.
My plan is, to store xaml code of every such grid as a separate file, then load relevant file at run time with usual code.
For now xaml looks about like this:
<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 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>
<Grid x:Name="areaShowers" HorizontalAlignment="Left" Height="700"
Margin="1653,790,-1561,-590" VerticalAlignment="Top" Width="1508"
IsVisibleChanged="areaShowers_IsVisibleChanged">
Here's example - areaShowers is a grid for relevant room. Until now, it was stored in the main file, like all other grids, and when I needed, I just altered its Margin to put it upon "areaMain" - also a grid.
Now though, I want to put each room into a file, then load it when I need it, and remove it from memory when I don't.
For example I'll create an empty grid "areaGeneric" and add it and it alone to original xaml.
So, I want something like this. Can't provide any earlier attempt, because I don't really know how it can be done.
Grid new_grid = new Grid;
new_grid = load from file (areaRoom.xaml); (file is among the project's
resources)
areaGeneric = new_grid;
Can I load a grid xaml at run-time, then switch grids in main code?
Thank you,
Evgenie

A really simple solution would just be to house each of your rooms inside a user control and then place the control into your container grid when you need to change rooms. Here's the rough idea:
public partial class MainWindow : Window
{
UserControl _currentRoom;
public MainWindow()
{
InitializeComponent();
}
protected override void OnPreviewMouseDown(MouseButtonEventArgs e)
{
this.areaContainer.Children.Clear();
_currentRoom = null;
if (e.LeftButton == MouseButtonState.Pressed)
_currentRoom = new Room1();
if(e.RightButton == MouseButtonState.Pressed)
_currentRoom = new Room2();
this.areaContainer.Children.Add(_currentRoom);
base.OnPreviewMouseDown(e);
}
}
A "Room":
<UserControl x:Class="Test.Room1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Button Height="100" Width="100">
Hello world!
</Button>
</UserControl>
As for cleaning up your resources - once the user control is removed from the visual tree (assuming you aren't holding a reference) the GC should dispose of the user control. If you wanted to clear your resources more quickly you could implement a dispose method on your rooms and then call that before you change areas.

Trying to have multiple content with user control [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Below is the xaml code I have for a custom user control. My goal is to create a control which displays a graphic in the OuterBox, but then will also allow me to load another graphic to be displayed on top of it using the InnerBox section. For example, the first/bottom/Outer graphic could be a picture of a dog. If a user clicks this and answer is correct, a check mark graphic would appear on top of the dog. If a wrong answer, a X would appear. That is a very simplistic example, but illustrates the problem. My program would have many permutations of outer and inner graphic combinations, so it is not feasible to have all possible combinations of outer and inner graphics options in a resource dictionary.
I can see 2 options, with number 1 being preferable.
Create control where you can set the outer and inner viewbox child content individually. Right now, I can do one or the other, but not both. Whichever content is set first is what appears. Is it even possible?
Generate xaml strings on the fly and piece the inner string within the outer string, thus creating a nested xaml string. I have verified I can put a nested xaml string into a control from a resource dictionary and it will work. To do this, how can I set the viewbox child content to a dynamically created xaml string through code, as will not be possible to store in dictionary ahead of time? If this works, I could pull two xaml strings (outer and inner graphic), piece them together, and then display the nested graphic.
I would like to do this in VB, but will work it out in C# if need be.
Any help would be greatly appreciated.
My control definition.
<UserControl x:Class="CardBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestingNested"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Viewbox Name="OuterBox">
<Canvas Width="100" Height="100" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- need outer content dynamically set here -->
<Viewbox Name="InnerBox">
<!-- need inner content dynamically set here -->
</Viewbox>
</Canvas>
</Viewbox>
</UserControl>

I would use a Grid to overlay the inner graphic on top of the outer graphic, and control the visibility of the inner graphic. A Viewbox can have only one child element. Grid can have multiple. The child with the higher ZIndex goes on top.
<UserControl x:Class="CardBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestingNested"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid Width="100" Height="100">
<Image Source="{Binding Path=OuterGraphic}"
Panel.ZIndex="1"/>
<Image Source="{Binding Path=InnerGraphic}"
Panel.ZIndex="2"
Visibility="{Binding Path=InnerGraphicVisibility}"/>
</Grid>
</UserControl>
In your code-behind, add the OuterGraphic, InnerGraphic, and InnerGraphicVisibility dependency properties like so:
Public Shared ReadOnly OuterGraphicProperty As DependencyProperty =
DependencyProperty.Register("OuterGraphic", GetType(ImageSource), GetType(CardBox), New PropertyMetadata(Nothing))
Public Property OuterGraphic As ImageSource
Get
Return CType(GetValue(OuterGraphicProperty), ImageSource)
End Get
Set(value As ImageSource)
SetValue(OuterGraphicProperty, value)
End Set
End Property
Then you should be able to set the graphics dynamically by setting the OuterGraphic and InnerGraphic properties, and turn the inner graphic on and off by setting InnerGraphicVisibility.

<Image /> displays image at design-time but not at runtime; why?

I'm trying to insert an image into my Windows Store app and it appears in design-time in the XAML editor but at runtime the image does not appear.
I'm pretty sure I'm using the right code here, and I have added the logo to the Assets folder however it still doesn't appear at runtime. If I got it wrong with the code or the Assets folder then it wouldn't even be appearing at design-time in the editor I think so what gives?
XAML:
<Page
x:Class="AppName.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppName"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image Source="Assets\Logos\16380.png"
Stretch="None"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="120, 0, 0, 0"
/>
</Grid>
</Page>

I've managed to solve this problem.
When inserting images onto a page in XAML, you need to right-click the image file in Solution Explorer, click Properties and then make sure its Build Action is set to Content and then set Copy to Output Directory to Copy if newer. You also need to use forward slashes (/) and not back-slashes ().

What is the equivalent way to use Bitmap,Graphics,PictureBox & BitmapCopy() in WPF?

I'll try to explain my problem clearly.
I have a working code in WinForms that has a Board (PictureBox) that shows an image thats generated from a list of users controls (win-forms) by the function UserControl.BitmapCopy() for each user control.
This process begins with a blank image (Graphic type), and for each user control I draw it in a specific location with the function BitmapCopy() of the user control.
The result is an image that looks like a real form (with buttons,labels,etc.), but it’s just an image.
Then I show this image in a picture Box.
Now I need to implement this code in WPF, but I can’t generate an image of each user control with BitmapCopy().
I found this code that does it, so now I can generate a bitmap for each user control, but I don’t know what is the best way to create the Big Board that eventually shows a bitmap that has all the user controls images inside it, in different locations.
I would appreciate any help.

This is the equivalent in WPF:
<Window x:Class="MiscSamples.VisualBrush"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="VisualBrush" Height="300" Width="300" x:Name="Window">
<StackPanel>
<TextBlock Text="Hi, Im a Window!"/>
<TextBox Text="This is a TextBox"/>
<Slider Width="200"/>
</StackPanel>
<Window.ToolTip>
<ToolTip DataContext="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}">
<Grid Height="400" Width="400">
<Grid.Background>
<VisualBrush Visual="{Binding}"/>
</Grid.Background>
</Grid>
</ToolTip>
</Window.ToolTip>
</Window>
The Window's ToolTip consists of a grid painted with VisualBrush whose Visual is the Window itself. It looks like this:
As you can see, Exactly 0 lines of C# code are required to achieve the same in WPF.