How to have a black border around image in c#.the image exists inside a wrap panel
Just add a border to the Image:
<toolkit:WrapPanel x:Name="wp">
<Border BorderBrush="Black" BorderThickness="5" >
<Image Source="myimage.png" />
</Border>
</toolkit:WrapPanel>
Or add it to the WrapPanel in code:
var b = new Border
{
BorderBrush = new SolidColorBrush(Colors.Black),
BorderThickness = new Thickness(5)
};
var bi = new BitmapImage
{
UriSource = new Uri("/myimage.png", UriKind.Relative)
};
b.Child = new Image {Source = bi};
wp.Children.Add(b);
Use a border element and configure it and set the background to a imagebrush with your image as source.
Here´s some XAML:
<Border BorderBrush="Black">
<Border.Background>
<ImageBrush ImageSource="<Your Image>"/>
</Border.Background>
</Border>
You can also define a CornerRadius on the Border to make rounded corners. This will also apply to the image.
Related
Given a bitmap:
Swamp1 = new BitmapImage(new Uri("pack://application:,,,/Images/Swamp-Corner-Transparent.png"));
How can I specify the coordinates that it will appear on a canvas:
<Canvas Grid.Column="2" HorizontalAlignment="Right" Height="822" VerticalAlignment="Top" Width="1198" Name="MainCanvas">
<Image Name="MapBorderSource" />
</Canvas>
I've done this before, but it was a long time ago. Specifically, I need to draw the BitmapImage 'Swamp1' at the coordinates X,Y of the Canvas 'MainCanvas' on top of the Image 'MapBorderSource'. The PNG has white set to Alpha 0.
In code behind, you would write
var image = new Image
{
Source = new BitmapImage(new Uri(
"pack://application:,,,/Images/Swamp-Corner-Transparent.png"));
};
Canvas.SetLeft(image, x);
Canvas.SetTop(image, y);
MainCanvas.Children.Add(image);
If you need to put the new Image directly on top of MapBorderSource, below any possible other child elements, you could write
var index = MainCanvas.Children.IndexOf(MapBorderSource) + 1;
MainCanvas.Children.Insert(index, image);
You can specify coordinates like this..
<Image Name="MapBorderSource" Canvas.Top="10" Canvas.Left="10" />
This is a very basic question.
I want to be able to add a shape defining different opacity for fill and for stroke.
If I add this:
Ellipse e = new Ellipse();
e.Width = e.Height = 150;
e.Stroke = Brushes.Aqua;
e.Fill = Brushes.Chartreuse;
e.StrokeThickness = 20;
e.Opacity = .25;
plotCanvas.Children.Add(e);
I can only set 1 opacity. Instead I would like the fill to be 0.25 opaque and the stroke to be 1.0 opaque.
Thank you
Patrick
Setting the Opacity on the Ellipse will set the opacity for the entire control. What you want to do is create dedicated Brushes for Fill and Stroke, and control the opacity on the Brushes, i.e. :
SolidColorBrush strokeBrush = new SolidColorBrush(Colors.Aqua);
strokeBrush.Opacity = .25d;
Alternatively, you could control the Alpha channel of the brush:
SolidColorBrush strokeBrush = new SolidColorBrush(Color.FromArgb(/*a, r, g, b*/));
<Ellipse Stroke="Red" Width="200" Height="100" StrokeThickness="5">
<Ellipse.Fill>
<SolidColorBrush Color="Green" Opacity=".25"></SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
Or in C# you can set the fill to a new SolidColorBrush with the desired opacity for the Opacity property.
You can't set the opacity twice for a single Shape object. Insteaf of setting the opacity twice you can add a Border to your Ellipse:
<Canvas x:Name="MyCanvas" Width="1000" Height="1000" Background="White">
<Border BorderBrush="Black" Opacity="1" BorderThickness="10" CornerRadius="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}">
<Ellipse Height="150" Width="150" Fill="Black" Opacity="0.25"></Ellipse>
</Border>
But since the Border is a rectangle which encloses the ellipse, you also need to set the cornerradius
(Edit) i have an image in tabItem1. when i resize window(dragging by corner or maximize button) the image also resize and occupy whole grid. i added width and height on image and the resisng stopped default to actual image width & height in pixels.
Do i have to apply width and height to prevent resising of control whom i don't want to resize on window scale? or is there any property for controls to prevent resizing.
Basically, i'll have some pics which i don't want to be resided, and there will be some text which i want to be resided.
XAML:
<Window x:Class="Engine.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="600" Height="600">
<Grid>
<TabControl Grid.RowSpan="2">
<TabItem Header="TabItem1">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="TGrid1" Background="#FFE5E5E5"/>
</ScrollViewer>
</TabItem>
<TabItem Header="TabItem2">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="TGrid2" Background="#FFE5E5E5">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
</TabItem>
</TabControl>
</Grid>
</Window>
Code:
public MainWindow()
{
InitializeComponent();
var bitmapFrame = BitmapFrame.Create(new Uri(#"" + AppDomain.CurrentDomain.BaseDirectory + "Chrysanthemum.jpg"), BitmapCreateOptions.DelayCreation, BitmapCacheOption.None);
var dragDropImage = new Image
{
Source = bitmapFrame, //new BitmapImage(new Uri(#"" + AppDomain.CurrentDomain.BaseDirectory + "Chrysanthemum.jpg")),
Name = "dragDropImage",
Width = bitmapFrame.PixelWidth,
Height = bitmapFrame.PixelHeight
};
TGrid1.Children.Add(dragDropImage);
var rect = new Rectangle
{
Stroke = new SolidColorBrush(Colors.Red),
Fill = new SolidColorBrush(Colors.Black),
Width = 474,
Height = 405
};
Grid.SetRow(rect, 0);
TGrid2.Children.Add(rect);
}
If you set the properties VerticalAlignment (for example to Top) and HorizontalAlignment (for example to Left) of your components image and rect, these controls will be sized according to the content need, instead of the available space in the container.
Is that what you want ?
EDIT : For your image, you should set its property Stretch="None".
See here.
EDIT 2 :
var dragDropImage = new Image
{
Source = bitmapFrame, //new BitmapImage(new Uri(#"" + AppDomain.CurrentDomain.BaseDirectory + "Chrysanthemum.jpg")),
Name = "dragDropImage",
VerticalAlignment = System.Windows.VerticalAlignment.Top,
HorizontalAlignment = System.Windows.HorizontalAlignment.Right,
Stretch = System.Windows.Media.Stretch.None
};
I have added 10 images in a stackpanel horizontally which is inside a scrollviewer. When user swipe the page the scrollviewer stops at certain position, if the scroll stops at &th image i want to get the name of the image. How to get that?
for (int i = 0; i <= 59; i++)
{
Uri uri = new Uri("http://d1mu9ule1cy7bp.cloudfront.net/2012/media/catalogues/47/pages/p_" + i + "/thump.jpg");
ImageSource img1 = new BitmapImage(uri);
Image rect = new Image { RenderTransform = new TranslateTransform() };
rect.Source = img1;
stack.Children.Add(rect);
}
XAML:
<ScrollViewer HorizontalContentAlignment="Left" HorizontalAlignment="Left" Name="scroll" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">
<StackPanel Name="stack" Width="Auto" Orientation="Horizontal" HorizontalAlignment="Left" >
</StackPanel>
</ScrollViewer>
Assuming that your images are all the same size, you could calculate this by looking at the HorizontalOffset of the ScrollViewer.
I want to set OpacityMask to a control, but I need to build that mask dynamically.
Here is how it should look:
The width and height of the whole (red) rectangle is dynamic, based on width and height of parent control. But I need to place two small rectangles (static width and height) in top left and top right corner, as shown on image. So how can I make this happen?
I tried this code, but it doesn't work: (nothing is displayed at all)
<Border BorderBrush="#80FFFFFF" BorderThickness="1" CornerRadius="5">
<Border.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Height="2">
<Border Background="Transparent" Width="12" VerticalAlignment="Stretch" HorizontalAlignment="Left" />
<Border Background="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<Border Background="Transparent" Width="12" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
</StackPanel>
<Border Background="Black" />
</DockPanel>
</VisualBrush.Visual>
</VisualBrush>
</Border.OpacityMask>
</Border>
Is it even valid to use VisualBrush this way (as a OpacityMask)?
If I understand your question correctly you want those Black squares in you image to be transparent?
Update: Uploaded sample project here: http://www.mediafire.com/?5tfkd1cxwfq0rct
I think the problem is that the Panel inside the VisualBrush won't stretch. You could get the desired effect by Binding the Width and Height of whatever Panel you use to the ActualWidth and ActualHeight of the Border
<Border Name="border" BorderBrush="Red" BorderThickness="1" CornerRadius="5">
<Border.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Grid Width="{Binding ElementName=border, Path=ActualWidth}"
Height="{Binding ElementName=border, Path=ActualHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Fill="Transparent" Grid.Column="0"/>
<Rectangle Fill="Black" Grid.Column="1"/>
<Rectangle Fill="Transparent" Grid.Column="2"/>
<Rectangle Fill="Black" Grid.Row="1" Grid.ColumnSpan="3"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Border.OpacityMask>
<Grid>
<TextBlock Text="Testing OpacityMask with a rather long string................." Grid.ZIndex="3"/>
<Rectangle Fill="Green"/>
</Grid>
</Border>
Update Again
The DropShadowEffect for the Decorator Child of the Border seems to push the OpacityMask for the Border both Verticaly and Horizontaly. And what's even worse is that it seems to stack, so in your example when you have three DropShadowEffects for three nested Decorators, the sum of the BlurRadius is 45 (20+15+10) so the OpacityMask is pushed by a value of 45 (at least it looks like this is whats going on, but it's a little hard to tell..). You could try to compensate for this by increasing the ColumnDefinition Widths and RowDefinition Heights but I think it'll be hard to find a dynamic solution.
A better approach to your problem may be to use Border.Clip but that doesn't come easy either.
Point1: 0, 2
Point2: 12, 2
Point3: 12, 0
Point4: Width of Border - 12, 0
Point5: Width of Border - 12, 2
Point5: Width of Border, 2
Point6: Width of Border, Height of Border
Point7: 0, Height of Border
Update 3
Came up with a better solution that doesn't require so many Bindings. Create a custom class that derives from Border and override GetLayoutClip. This works both in Designer and Runtime. To increase flexibility of ClippedBorder you could introduce some Dependency Properties to use instead of the hardcoded 2 and 12. New sample app here: http://www.mediafire.com/?9i13rrqpbmzdbvs
public class ClippedBorder : Border
{
protected override Geometry GetLayoutClip(Size layoutSlotSize)
{
PathGeometry pathGeometry = new PathGeometry();
pathGeometry.Figures = new PathFigureCollection();
//Point1: 0, 2
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(0, 2);
//Point2: 12, 2
LineSegment lineSegment1 = new LineSegment();
lineSegment1.Point = new Point(12, 2);
//Point3: 12, 0
LineSegment lineSegment2 = new LineSegment();
lineSegment2.Point = new Point(12, 0);
//Point4: Width of Border - 12, 0
LineSegment lineSegment3 = new LineSegment();
lineSegment3.Point = new Point(this.ActualWidth-12, 0);
//Point5: Width of Border - 12, 2
LineSegment lineSegment4 = new LineSegment();
lineSegment4.Point = new Point(this.ActualWidth-12, 2);
//Point5: Width of Border, 2
LineSegment lineSegment5 = new LineSegment();
lineSegment5.Point = new Point(this.ActualWidth, 2);
//Point6: Width of Border, Height of Border
LineSegment lineSegment6 = new LineSegment();
lineSegment6.Point = new Point(this.ActualWidth, this.ActualHeight);
//Point7: 0, Height of Border
LineSegment lineSegment7 = new LineSegment();
lineSegment7.Point = new Point(0, this.ActualHeight);
pathFigure.Segments.Add(lineSegment1);
pathFigure.Segments.Add(lineSegment2);
pathFigure.Segments.Add(lineSegment3);
pathFigure.Segments.Add(lineSegment4);
pathFigure.Segments.Add(lineSegment5);
pathFigure.Segments.Add(lineSegment6);
pathFigure.Segments.Add(lineSegment7);
pathGeometry.Figures.Add(pathFigure);
return pathGeometry;
}
}