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.
Related
I've been researching all over the internet for a way to change the pushpin image in the Bing Maps C# control. The closest that I came was using the following solution:
Change image for pushpin WPF
It is not entirely what I'm looking for, as I want to be able to change the color of the push pin as well as add a label.
The above solution is basically an image that is drawn over a push pin without additional functionality such as adding a label. I want to be able to easily change an image while having custom label functionality.
Is there any other way of doing this? An alternative would be to make use of "standard" Bing push pin graphics and be able to change the size. However it seems this functionality is not available in the C# control
This following blog post answers my questions:
http://dennis.bloggingabout.net/2012/10/17/bing-maps-on-wpf-and-custom-pushpin-tutorial-for-pixelsense/
Surprisingly this is the only question about this topic in SOF (the other one is closed). To complete newbies in WPF (like me) it is hard to find good and at the same time simple information, so I will show how I managed to use custom images in programatically added pushpins in VB.NET:
This is my MainWindow.xaml file:
<Window x:Class="MainWindow"
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"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
xmlns:local="clr-namespace:MyBingMapsApp"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ControlTemplate x:Key="PushpinControlTemplate" TargetType="m:Pushpin">
<Grid>
<Rectangle Width="24" Height="24">
<Rectangle.Fill>
<ImageBrush ImageSource= "Resources/marker_green.png"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<m:Map x:Name="myMap"
CredentialsProvider= "xxxxxx mycredentialskey xxxxxxxx"
Center="42.13618,-0.40822"
ZoomLevel="15">
</m:Map>
</Grid>
</Window>
As you can see, you must define a ControlTemplate whose TargetType="m:Pushpin"
There you can draw whatever you need. The simplest: use an image from your resources.
Important: change image "Build action" to Resource (click on the image in your resources folder of the Solution Explorer and change it in Advanced settings). Otherwise you will have to hardwrite the image path or use Uris or more complicated stuff
Now you are ready to create a pushpin wherever you need and assign your template:
mypin = New Pushpin
mypin.Location = New Location(mylat, mylon)
mypin.ToolTip = "This is a pushpin with custom image"
Dim mytemplate As System.Windows.Controls.ControlTemplate = FindResource(“PushpinControlTemplate”) 'here of course you must put the key name of your template
mypin.Template = mytemplate
I made a WPF control in a library project and would like to extend it with a new one.
<UserControl x:Class="Genesyslab.Desktop.Modules.ExtensionUtils85.GUI.EmbeddingUserControl"
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">
<Grid>
</Grid>
</UserControl>
I have tried to extend it like this:
<src:EmbeddingUserControl x:Class="Interaxalab.Desktop.Modules.PrototipoCable.CustomViews.InteractionView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="Genesyslab.Desktop.Modules.ExtensionUtils85.GUI"
Name="InteractionWorksheetView" Height="321.613" Width="471.396"
>
<Grid>
<WindowsFormsHost x:Name="windowsFormsHost1" HorizontalAlignment="Left" Height="284" VerticalAlignment="Top" Width="471"/>
</Grid>
</src:EmbeddingUserControl>
However, I get an error message saying that the name "EmbeddingUserControl" does not exist in namespace "Genesyslab.Desktop.Modules.ExtensionUtils85.GUI".
The name clearly does exist, since the xaml.cs can find it, but for some reason the xaml cannot.
Any help would be appreciated.
Long story short - you cannot inherit control with xaml by another control with xaml (and does it makes sense even to do so?). In your case, EmbeddingUserControl does not contain any visual tree elements (just empty grid), so you can just do:
public class EmbeddingUserControl : UserControl {
// some methods, properties of your control
}
Then you can inherit exactly like you do already in your question (don't forget to inherit from EmbeddingUserControl both in xaml file and in code-behind file).
You can also inherit from user control with xaml, if your inherited control does not have xaml itself (so you can add\override logic).
If you need to inherit some visual stuctures - you have to switch from inheritance to composition. That is: your base control provides some placeholders where other controls may be placed, or even better allows to provide templates to format data items (like for example ItemsControl and ItemTemplate property). Then you just fill those placeholders with other controls if necessary.
My WPF window should be able to load in different controls in same spot on the window; which should be frames to fulfill that task.
Hence i'm trying to make a frame load different pages by editing a databound string containing the Frames source. And I have managed to do that, however at the moment I have no idea how to share the frames data to the windows viewmodel hosting the frame.
I'm using MVVM and I thougth that if I could also databind a "viewmodel" to the frames datacontext, I could then both choose which page to load and which datacontext the page should use, all from the host window, therefore having access to it.
Below is my xaml.
<Window x:Class="View.Window"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window" Height="300" Width="300">
<Grid>
<Frame NavigationUIVisibility="Hidden" DataContext="{Binding WindowClass.DataContext}" Source="{Binding WindowClass.FrameURI}"/>
</Grid>
However, if I now assign the pages datacontext through this binding, instead of in the code behind, nothing gets loaded. Now I basically end up with a blank frame.
Why?
You can use Window.Resources to bind to your DataContext, then Bind to the FrameURI (You'll need to fix the appropriate namespace instead of my custom xmlns:WindowClass):
<Window x:Class="View.Window"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WindowClass="clr-namespace:WindowClass"
Title="Window" Height="300" Width="300">
<Window.Resources>
<WindowClass:MyViewModelName/>
</Window.Resources>
<Grid>
<Frame NavigationUIVisibility="Hidden" DataContext={Binding} Source="{Binding FrameURI}"/>
</Grid>
You can find a very basic tutorial here
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.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to achieve an effect of overlapping the main window boundary with a control. It's hard to explain this in words which is also maybe why I am having difficulty finding information on how to do this or if it is even possible.
Below is an example of the effect I am trying to get (from the designer), where the "note" objects float outside the bounds of the main window.
However the effect I get at runtime is this (below), the inner controls are clipped by the boundary of the main window.
Can someone please tell me if this is possible (or not), and if it is maybe some suggestions about how I could get this effect.
There is a control that can achieve this kind a behavior have you tried a Popup control?
Check this out
Here's an examp;e"
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ToggleButton x:Name="MainButton" Content="Show popup" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<Popup PlacementTarget="{Binding ElementName=MainButton}" Placement="Bottom" AllowsTransparency="True" IsOpen="{Binding ElementName=MainButton, Path=IsChecked}">
<Grid>
<Border BorderBrush="Orange" BorderThickness="1" Background="Yellow"/>
<TextBlock Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry"/>
</Grid>
</Popup>
</Grid>
Contents of window will always get clipped. So basically there is only one way to go here. You could get the desired effect by creating a new transparent window for your floating content and then manualy set and update the position of floating content window based on the location of main window.
So far I've been using AvalonDock for similar functionalty. You might give it a try...
I don't think there's a way to draw outside the bounds of a window. However, you could simply create a new window for the note control and align it to your main window.
Did you try ClipToBounds property?