I am completely new to WPF, so please be gentle. :) I have a 4x4 grid. Within each cell, I want to have concentric rectangles that frame the cell and then place widgets within them. The outer rectangle is to fill the cell. The inner rectangles are then to be within the boundaries of the outer rectangles, etc. I am able to place the first rectangle successfully. However, I am having a devil of a time placing the inner rectangles. My gut says this should be doable without code-behind.
I've tried a canvas within a canvas, not to mention various permutations and combinations.
<Grid Grid.Row="0" Grid.Column="0" >
<Canvas>
<Rectangle Canvas.Left="0" Stroke="Gray" Canvas.Top="0" RadiusX="10" RadiusY="10" StrokeThickness="20" x:Name="r0c0"
Stretch="Fill" Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}"/>
<Rectangle Canvas.Left="15" Stroke="Blue" Canvas.Top="15" RadiusX="5" RadiusY="5" StrokeThickness="10"
Stretch="Fill" Width="{Binding ActualWidth, ElementName=r0c0}"
Height="{Binding ActualHeight, ElementName=r0c0}"/>
</Canvas>
</Grid>
Figured it out. Canvas and rectangle was overdoing it. Borders were the route to go.
<Grid Grid.Row="0" Grid.Column="1">
<Border BorderThickness="20" BorderBrush="Gray" CornerRadius="10"
Margin="0,0,0,0"/>
<Border BorderThickness="10" BorderBrush="Blue" CornerRadius="10"
Margin="15,15,15,15"/>
</Grid>
Related
I have the following problem: I overlay 2 controls over one another and want a single border to surround them both. I thought I could control the ZIndex of the border over each control and give them a low ZIndex: 2. Then give the controls a higher ZIndex (4 and 5). The following xaml as a UserControl is what I'm referring to:
<Canvas>
<Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2" Canvas.Left="50" Canvas.Top="30">
<Rectangle Width="200" Height="20" Fill="Aqua" Canvas.ZIndex="5"/>
</Border>
<Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2" Canvas.Left="150" Canvas.Top="00">
<Rectangle Width="50" Height="200" Fill="Yellow" Canvas.ZIndex="5"/>
</Border>
</Canvas>
The result looks like:
But I desire is the following image but with the border with red-X removed:
Can anyone recommend a way to do this ? The Border ZIndex method is not working.
Thanks!
ZIndex is not working cause Rectangles are not childs of Canvas. So you can fix it by placing them outside of borders and adjusting its Heights, Widths and Canvas.Left, Canvas.Top properties. So the example looks like this.
<Canvas>
<Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2"
Canvas.Left="46" Canvas.Top="26"
Width="208" Height="28">
</Border>
<Rectangle Width="200" Height="20" Fill="Aqua" Canvas.ZIndex="5"
Canvas.Left="50" Canvas.Top="30" />
<Border BorderBrush="Black" Height="208" Width="58" BorderThickness="4"
Canvas.ZIndex="2" Canvas.Left="146" Canvas.Top="00">
</Border>
<Rectangle Canvas.Left="150" Canvas.Top="4" Width="50" Height="200" Fill="Yellow"
Canvas.ZIndex="5"/>
</Canvas>
(I'm extremely new to xaml)
<Canvas Width="200" Height="100">
<Rectangle Width="" Height=""></Rectangle>
</Canvas>
Now, is it possible to set Rectangle's Width and Height the same as Canvas's using Xaml only?
or is necessary to use code?
You should make Data Binding. Looks like this:
<Canvas Name="myCanvas" Width="200" Height="100">
<Rectangle Width="{Binding ElementName=myCanvas, Path=Width}" Height="{Binding ElementName=myCanvas, Path=Height}"> </Rectangle>
</Canvas>
<DataTemplate x:Key="StatusColumnTemplate">
<Canvas>
<Rectangle Fill="Red" Canvas.ZIndex="1" Opacity="30" Height="{Binding Value, ElementName=Stacky}" Width="{Binding Value, ElementName=Stacky}"></Rectangle>
<StackPanel x:Name="Stacky" Orientation="Horizontal">
<Image Height="16" Margin="0,8,0,0" Opacity="{Binding Comment, Converter={StaticResource OpacityConverter}}" VerticalAlignment="Top" Width="16" Source="grade.png" Stretch="Fill"/>
<Image Height="16" Margin="5,8,0,0" Opacity="{Binding Grade, Converter={StaticResource OpacityConverter}}" VerticalAlignment="Top" Width="16" Source="/Module.Reports;Component/thumb-up.png" Stretch="Fill"/>
<Image Height="16" Margin="0,8,0,0" Opacity="{Binding Effort, Converter={StaticResource OpacityConverter}}" VerticalAlignment="Top" Width="16" Source="notepad.png" Stretch="Fill"/>
</StackPanel>
</Canvas>
</DataTemplate>
Currently the rectangle does not seem to bind to the height and width of the stackpanel. Is there anyway I can achieve it where a rectangle covers a datagrid cell with an opacity?
Height="{Binding ActualHeight, ElementName=Stacky}" Width="{Binding ActualWidth, ElementName=Stacky}"
Please check your code use used Value instead you should bind it to ActualHeight and ActualWidth of the Stacky.
I am perplexed with an issue that I am experiencing, using ScaleTransform. I have a Grid with a fixed width and height. The grid contains one child, a Rectangle. The Rectangle's Fill is a VisualBrush whose Visual binds to a canvas outside of the grid, whose dimensions are rather large. On the rectangle, I use a ScaleTransform, with ScaleX and ScaleY both being set to 0.18. Essentially, I am trying to scale the Rectangle's visual down to fit within my grid. What appears to be happening is that the Grid itself is being scaled down, resulting in a much smaller result than what I want. I have included the code below. Just as a point of reference, the height and width that the rectangle binds do are essentially 900 by 600, respectively. Any pointers as to what I might be doing wrong would be greatly appreciated.
<Grid Height="225" Width="200" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="PART_Content">
<Rectangle Height="{Binding Path=ActualHeight}" Width="{Binding Path=ActualWidth}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle.Fill>
<VisualBrush Visual="{Binding}"/>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="0.183" ScaleY="0.183"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
Can you post the XAML for the Canvas element? I tried the following and I am getting the behavior you are going for (the rectangle is scaled and the grid is sized correctly)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid ShowGridLines="True" Height="225" Width="200" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="PART_Content">
<Rectangle Height="{Binding Path=ActualHeight}" Width="{Binding Path=ActualWidth}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=theCanvas}"/>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="0.183" ScaleY="0.183"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Canvas x:Name="theCanvas" Grid.Row="1">
<Rectangle Fill="Brown" Height="300" Width="300" />
</Canvas>
</Grid>
What is ActualWidth and ActualHeight? Unless I am mistaken the ActualHeight and ActualWidth properties as they normally mean in WPF are not DP's and you cannot bind to them. As has been pointed out below these are readonly dependency properties. Assuming this is in a CustomControl style Binding should be changed to TemplateBinding first.
I removed the bindings and essentially created a static version of your XAML which looks just fine. Since you have Part_Content defined for the grid, I am curious, is this xaml part of a custom control style? Is the code of the CustomControl manipulating the grid via PART_Content?
<Grid Height="225" Width="200" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="PART_Content" Background="Red">
<Rectangle Height="225"
Width="200"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Blue">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="0.183" ScaleY="0.183"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
I want to remove the border of image which is displayed when i click on it .
**<Image x:Name="ImagePresenter" Source="{StaticResource IconDocument}" />**
<Rectangle x:Name="focusElement" Opacity="0" Stroke="{StaticResource color_506_brush}" StrokeThickness="1" IsHitTestVisible="False" RadiusX="4" RadiusY="4"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Adding an image to a Silverlight UserControl results in just the image with no border displaying for me.
Xaml:
<Image x:Name="ImageText" Source="TestImage.png"/>
I assume that isn't going to help you. Could you give a bit more detail in your question and see if I can find a better answer?
Your question is not quite clear to me as silverlight doesnt add any border to image unless something in your code tells it to.
Try setting StrokeThickness to zero. (If required modify the template to set the strokethickness to zero).
Hope this helps
Yes you all were right by default the image doesn't have border. As i had two columns in my defined style it was creating two rectangles for each(one for my textblock another for image).To get rid of this I used one column defination and it worked. :)
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="ImagePresenter" Grid.Column="0" Source="{StaticResource IconDocument}" Width="15" HorizontalAlignment="Left"/>
<TextBlock x:Name="TextPresenter" Grid.Column="0" Text="{Binding DocumentName}" Style="{StaticResource DocumentViewerOutputTextItem}" Margin="15 4 4 0"
Visibility="{Binding IsSelected, Converter={StaticResource InvertVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBlock Grid.Column="0" Text="{Binding DocumentName}" Style="{StaticResource DocumentViewerOutputTextItem_MouseOver}" Margin="15 4 4 0"
Visibility="{Binding IsSelected, Converter={StaticResource VisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<Rectangle x:Name="focusElement" Opacity="0" Stroke="{StaticResource color_506_brush}" StrokeThickness="1" IsHitTestVisible="False" RadiusX="4" RadiusY="4"/>
</Grid>
</Grid>
</ControlTemplate>