I have a perplexing problem that makes no sense to me - I am trying to place a border round an image control in WPF. The image control displays an image perfectly (I have loaded through code behind and XAML and both work fine). However when I place a border around the image control the image does not appear at all. This happening with three image controls all with identical config. Does anyone know why this is or how I can fix it? Many thanks, Jeff.
XAML (with border commented out) is below:
<!--<Border BorderBrush="Black" BorderThickness="2" Margin="201,172,618,450" Grid.Column="1">-->
<Image Name="imgFault11" Stretch="Fill" Grid.Column="1" Margin="200,172,619,450">
<!--</Border>-->
You are putting both in Grid.Column="1"
Put the image in the border
Start with no margins
<Border BorderBrush="Black" BorderThickness="2" Grid.Column="1">
<Image Name="imgFault11" Stretch="Fill">
</Border>
You may have to send the border to the Background. Once you add this it overlays the image. Right click the border .. go to order and then choose "Send to Back". The border control is in the toolbox. This is all a little messy though as getting the border to match the image box size takes time to get right and then you have one control on top of another..etc.
Related
I am trying to make simple video Player with MahApps. I have a little problem with layout of flyout. I want to put slider into flyout and make its width equal to flyout width.
<Controls:FlyoutsControl>
<Controls:Flyout Padding="0" Name="mediaStatus" Height="auto" CloseButtonVisibility="Collapsed" IsOpen="False" Position="Bottom">
<Slider Padding="0" Margin="0" Style="{DynamicResource FlatSlider}"></Slider>
</Controls:Flyout>
</Controls:FlyoutsControl>
With this code I'm getting something like this:
screenshot
What can I do to delete this margin on the left of the slider.
You must also set TitleVisibility="Collapsed". The title/header is still visible on the left side (with some margin which produces this black space).
I want to create following form but problem is there when I'm setting the margin with negative value then it will not work and hide my cross image. Is this possible to create as it is? or any other way to create this form.
My need:
(in below image black area is transparent)
But now show my form like below image:-
Please let me know appropriate way.
You can't draw outside of your application, without using Adorners or Popups, as Akku says in the comments.
But what you can do is to, instead of making margins negative, make them positive. So that your content (the gradient background), have a margin of 10 or 20 (or whatever number that produces the right amount of spacing.
<Window (.....) AllowsTransparency="True" WindowStyle="None">
<Grid>
<Button VerticalAlignment="Top" HorizontalAlignment="Right" Height="15" Width="15"/>
<Border Margin="15">
<YOUR_CONTENT>
</Border>
</Grid>
</Window>
I have run into a very strange issue today:
I have a popup menu that opens when I hover above an image. The popup menu is positioned right of the image.
this popup menu is templated to look like a rectangle with a little arrow pointing to the image
the menu contains clickable elements, so I need to be able to move the mouse from the image to the menu without it closing in between, and this is where I get confused: if I move the mouse right over the tip of the arrow and then the menu, everything works fine. If I move the mouse over the transparent space between the image and the menu (above or under the arrow), the menu disappears.
Here is the template for the menu:
<Popup AllowsTransparency="True" Name="c_popup" Width="300" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Path Data="M 0 10 L 10 0 10 20 Z" Stroke="#252C37" Fill="#252C37" Margin="0,18,0,0" Grid.Column="0" />
<Grid Grid.Column="1" Background="#252C37">
<TextBlock Text="{Binding Name}" Margin="20,10,0,0" FontSize="18" Foreground="White" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextWrapping="WrapWithOverflow" />
</Grid>
</Grid>
</Popup>
you'll notice that I specifically put Background="Transparent" and not Null (I am aware of the effect this as on the hitTesting, see this question)
funny thing is, though: If I put Background="#01000000", it works as expected. (And I get almost what I want, since this is almost a transparent background)
but I would still like to know what is going on there...
I suspect it has something to do with the fact that this is a popupmenu. I assume WPF does something to remove the hitTesting on any surface that is transparent in a popup menu, either when the background is null (which is expected) or even if it is specifically set to transparent (not expected). Can anyone confirm this?
Converting my comment to an answer.
This seems to be more of a "Windows OS" issue than WPF specifically in the way AllowTransparency="True" at a Window level makes the system ignore the element for mouseover events when Background="Transparent" or Opacity="0" on the element..
A detailed explanation of this behavior can be found Here
Adding the MSDN answer just in case the link goes missing later:
Windows supports transparency at the HWND level through a feature called "layered windows".
Layered windows are represented by a bitmap.
The Operation System(OS) renders the bitmap whenever it needs to.
For the OS need to respond very quickly to mouse movement, Windows uses a dedicated Raw Input Thread (RIT).
RIT runs in the kernel and handles the singals from mouse hardware.
RIT can scan over the HWND hierarchy to detect which window the mouse is over.
For normal windows, the RIT checks the mouse position against the window's rectangle.
For layered windows, the RIT looks in the bitmap that specifies the content for the window and checks the effective transparency at that location. The effective transparency can be affected by opacity, color and alpha channel.
If the pixel is 100% transparent, the RIT skips the window and keeps looking. This point is the reason that MouseMove event is not fired.
If the Background of window and control are both Transparent, all the pixels that represent this control(Canvas in your example) in the layered windows are totally transparent. As described above, RIT will skip them and never send WM_MOUSEMOVE message.
So if you want only show up the control only when the mouse is over and otherwise and the window is transparent, you have to make the control not 100% transparent.
Something to note in this case is, even though Popup is within a Window that does not have AllowTransparency="True", Popup generates a Chrome-less window itself and the AllowTransparency="True" on the Popup affect this new chromeless-Window the same way as mentioned in the MSDN link above.
If this control were just a standard control like Button/Rectangle... then just setting the Background="Transparent" would make it work fine and not have this issue.
Hey I would like to know if its possible to do something like that with the MediaElement in WPF:
http://img11.hostingpics.net/pics/374632Captur2e.png
And Like that:
http://img11.hostingpics.net/pics/403059Capture.png
So I When I resize my window the Default resolution stay the same.
Thanks
Just have a look at the code below. It is a MediaElement in a Border in a Grid. The Border is only there to show that the Grid is filled completely. Running this code and resizing the containing window shows that MediaElement well preserves the aspect ratio of its content (a behaviour that may be altered by setting the Stretch property).
<Grid>
<Border BorderThickness="5" BorderBrush="White" Background="Black">
<MediaElement Source="C:\Users\Public\Videos\Sample Videos\Wildlife.wmv"/>
</Border>
</Grid>
I am starting to learn SL...
I am trying to make a MediaElement of size X, and on the bottom of the movie frame some subtitles that will run.
I was unable to understand if I need absolute position or something else.
Please advice
thanks
If you need to us it as a subtitle you just need to put your TextBlock under the MediaElement on your Grid and need to give VerticalAllignment property as bottom on XAML. And it will be over it. Like this;
<Grid>
<MediaElement/>
<TextBlock VerticalAllignment="Bottom"/>
</Grid>
You may refer Grid Layout as relative positioning if you're new to silverlight. And can give a margin to your textblock or anything you want just take a look at the intellisense (if using VS) and you'll understand, if you're using expression blend it'll be a lot easier with UI.
If you want to use absolute positioning you'll need to use Canvas instead of Grid Layout, its the same and you can change anything to canvas with nearly no problem. In canvas, you need to use left and right properties instead of allignments. Like this;
<Canvas>
<MediaElement/>
<TextBlock Canvas.Left="0" Canvas.Top="400"/>
</Canvas>
Another option is stackpanel its not really suitable for LayoutRoot, but its pretty nice for controls. So if you want your subtitles to stay under your movie you should use StackPanel like this;
<StackPanel Orientation="Vertical">
<MediaElement/>
<TextBlock/>
</StackPanel>
So to sum up;
-If you want your subtitles to be on top of your movie use grid like the first example,
-If you have a fixed size and you want to place your subtitles anywhere you want use Canvas,
-And if you want to put your subtitles under your movie use StackPanel.
-My personal choice would be grid. =)
For more information you may check this article it seems like a nice one!
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx
Happy coding!!
The TextBlock will overlay (within a Grid layout) the MediaElement simply because it is declared after the MediaElement. VerticalAlignment="Bottom" will place it at the bottom of the Grid. You might want to set the Grid's width and height (instead of the MediaElement) that of the size of the video. The MediaElement will auto size to stretch the full size of the grid.
<Grid x:Name="LayoutRoot" Width="480" Height="320">
<MediaElement/>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom"/>
</Grid>