I have an Esri ArcGis map control which I want to round around the edges. I am also using Prism4.0/MEF and SL4.
I tried to place it in a border, but that doesn't work (the Esri control is loaded into the MapRegion, in another module):
<Border Grid.Row="2"
Margin="2"
CornerRadius="25">
<ContentControl
prism:RegionManager.RegionName="MapRegion"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch">
</ContentControl>
</Border>
UPDATE: Looks like this is not possible. This isn't really a bug with the Map itself, but it kind of is. The Map uses a Canvas inside the Grid "RootElement". This Canvas holds the images for the map. When using a Canvas, it doesn't respect the bounds it's been given. You can reproduce the bug with the following XAML
<Border BorderBrush="Red" BorderThickness="2" CornerRadius="25">
<Grid>
<Grid>
<Canvas>
<Image Source="/Images/MyPicture.png"/>
</Canvas>
</Grid>
</Grid>
</Border>
The best approach is going to be to set an explicit style for the map. With this style any map that is used will have the rounded corners
<Style TargetType="esri:Map">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="esri:Map">
<Border CornerRadius="25" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid x:Name="RootElement" Height="Auto" Width="Auto"/>
<Rectangle x:Name="ZoomBox" Fill="#55FFFFFF" Stroke="Red" StrokeThickness="2" Visibility="Collapsed"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I have a Custom Control containing a Canvas placed inside a Viewbox. This allows me to resize the control and everything inside the Canvas scales beautifully.
Much to my annoyance a requirement to stop any scaling of text within the control has reared its head. All other controls (mainly graphics) should scale, but not text. Text should move to the correct place upon resize, but the font should remain the same.
Any ideas how to do this?
After much head scratching I found a relatively simple workaround.
As I'm not going to need to click on any text in the control I've put all graphics inside one canvas with zOrder 1 and all text in another with zorder 0. Then I put them inside a grid so they overlap:
<ControlTemplate TargetType="{x:Type local:ContourPlot}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Viewbox>
<Border BorderBrush="Black" BorderThickness="1">
<Canvas x:Name="cvGraph" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" >
<Rectangle Canvas.Left="40" Canvas.Top="31" Width="48" Height="41" Fill="AliceBlue"/>
</Canvas>
</Border>
</Viewbox>
<Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" >
<Label x:Name="lblTest" Canvas.Left="0" Canvas.Top="10" Content="Label" FontSize="12" />
</Canvas>
</Grid>
</Border>
</ControlTemplate>
the above tree view is looking with shadow effect on top left and left. I need a single thick line .
my xaml is
Margin="0,0,0,2" BorderBrush="Black" BorderThickness="1"
I need a single line but not a shodow. Can you please help me how to do it ?
One way to do it is to create simple Template for your TreeView like so:
<TreeView BorderBrush="Black" BorderThickness="1" Background="Beige">
<TreeView.Template>
<ControlTemplate TargetType="{x:Type TreeView}">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</TreeView.Template>
</TreeView>
You can try this to get rid of treeview border and apply your own border:
<Border BorderThickness="1" BorderBrush="Black">
<TreeView BorderBrush="Transparent" BorderThickness="0"
</TreeView>
</Border>
I am using the Silverlight Toolkit in a WPF project and I would like to add a dashed red horizontal line to a column chart at a Y-axis value that I can specify. I have modified the chart template and successfully added a line, but I'm not sure how to get the line to display at the y-axis value that I want and how to get it to stretch across the entire chart. Here is a picture of the chart I have so far:
and here is the chart template XAML code that I am using to generate it:
<charting:Chart Name="chartUsageHours" Grid.Column="1" BorderThickness="0" Padding="0" Loaded="chartUsageHours_Loaded">
<charting:Chart.Template>
<ControlTemplate TargetType="{x:Type charting:Chart}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<datavis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />
<chartingprimitives:EdgePanel Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" Grid.Row="1" Margin="0,0,0,0">
<Grid Panel.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
<Border Panel.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1, 0, 0, 1" />
<Grid Name="HoursThresholdContainer" Canvas.ZIndex="1" Background="Transparent">
<Grid Name="HoursThreshold">
<Line Name="Horizontal" HorizontalAlignment="Stretch" X1="0" Y1="100" X2="600" Y2="100" Stroke="Red" StrokeDashArray="4, 2"/>
</Grid>
</Grid>
</chartingprimitives:EdgePanel>
</Grid>
</Border>
</ControlTemplate>
</charting:Chart.Template>
<charting:Chart.Series>
<charting:StackedColumnSeries Visibility="{Binding Include_OnTimeVsFitTime, Converter={StaticResource BooleanToVisibilityConverter}}">
<charting:StackedColumnSeries.IndependentAxis>
<charting:CategoryAxis Orientation="X" SortOrder="None" ShowGridLines="False">
<charting:CategoryAxis.AxisLabelStyle>
<Style TargetType="charting:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:AxisLabel">
<TextBlock Text="{Binding Converter={StaticResource DateStringConverter}}" FontSize="8">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:CategoryAxis.AxisLabelStyle>
</charting:CategoryAxis>
</charting:StackedColumnSeries.IndependentAxis>
<charting:SeriesDefinition ItemsSource="{Binding ChartUsageHours}" DependentValuePath="Value" IndependentValuePath="Key" />
<charting:SeriesDefinition ItemsSource="{Binding ChartOnTimeHours}" DependentValuePath="Value" IndependentValuePath="Key" />
</charting:StackedColumnSeries>
<charting:StackedColumnSeries Visibility="{Binding DontInclude_OnTimeVsFitTime, Converter={StaticResource BooleanToVisibilityConverter}}">
<charting:SeriesDefinition ItemsSource="{Binding ChartUsageHours}" DependentValuePath="Value" IndependentValuePath="Key" />
</charting:StackedColumnSeries>
</charting:Chart.Series>
</charting:Chart>
Does anyone have an idea on how to do this?
Thanks,
Paul
By the way I have created a more generic chart which works with any kind of series (Column, Bar, StackedColumn etc) and displays any value as a line.
I've explained the usage of this chart in my blog post.
Source code can be downloaded here.
You can set a Line's Stretch="Fill" to make it stretch the whole length
As for aligning it along the Y-Axis, I would try either binding to the Y1/Y2 properties, or putting the line in a Canvas or Grid control which holds both the Chart and the Line and binding Canvas.Top to set its location
to get the y location of the line you would need to call the GetPlotAreaCoordinate method on your Y axis
chart.Axes[1].GetPlotAreaCoordinate(value) // you could name your axis if you like.
I ended up implementing something based on the techniques described here http://www.scottlogic.co.uk/blog/colin/2009/03/adding-a-location-crosshair-to-silverlight-charts-again/.
New to WPF and have Tabs and in each tab the content is presented in a curved corner panel/window/whateveryouwannacallit. I wasn't sure how to do this ( Style, ControlTemplate ) but decided to go the DataTemplate way.
So now I have this DataTemplate:
<DataTemplate x:Key="TabContentPresenter" >
<Border Margin="10"
BorderBrush="{StaticResource DarkColorBrush}"
CornerRadius="8"
BorderThickness="2"
Grid.Row="0"
Padding="5"
Background="{TemplateBinding Background}">
<ContentPresenter Content="{Binding}" />
</Border>
</DataTemplate>
As you can see with the the background property I wan't to set the background color at the content but Don't know how. Here I use it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl ContentTemplate="{StaticResource TabContentPresenter}" Background="White">
<!-- Something Here -->
</ContentControl>
<ContentControl ContentTemplate="{StaticResource TabContentPresenter}" Grid.Row="1" Background="Blue">
<!-- Something Here -->
</ContentControl>
</Grid>
Is using DataTemplate wrong here or is there any other way?
I could probably set the background straight on the content and change from padding in mthe template to margin in the content but in some similiar situations that wouldn't work and it's nicer to only have to set it once.
EDIT:
As per advice I changed to ControlTemplate and also put it inside a style. This solves the Background problem but creates a bigger one. Now the content won't appear. I read on a blog here that putting a targetType solves this but it didn't solve my problem. The code looks like this now and also changed the ContentControl to use the style instead of Template.
<Style x:Key="TabContentPresenter" TargetType="ContentControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Margin="10"
BorderBrush="{StaticResource DarkColorBrush}"
CornerRadius="8"
BorderThickness="2"
Grid.Row="0"
Background="{TemplateBinding Background}">
<ContentPresenter Content="{Binding}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use ControlTemplate instead DataTemplate
<ControlTemplate x:Key="TabContentPresenter">
<Border Margin="10"
CornerRadius="8"
BorderThickness="2"
Grid.Row="0"
Padding="5"
Background="{TemplateBinding Background}">
<ContentPresenter Content="{Binding}"/>
</Border>
</ControlTemplate>
Use Template instead of ContentTemplate
<ContentControl Background="Green" Template="{StaticResource TabContentPresenter}"/>
May be because TemplateBinding does not work with DataTemplate. Check this question for details.
Even if it works, all you need is a ControlTemplate and not a datatemplate.
Wpf dropshadow disappears.
Here is how to reproduce.
Type the following in xaml pad.
<Page.Resources>
<DropShadowEffect x:Key="shadow"
Opacity="1"
ShadowDepth="1"
Color="Blue"
BlurRadius="30"/>
</Page.Resources>
<Grid>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd"
BorderBrush="Black" BorderThickness="1"
Background="Yellow"
CornerRadius="8"
Effect="{StaticResource shadow}">
<TextBlock Text="Hello out there" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
You should see some text with a border abound it, and a drop shadow around the border.
Now change the Margin="0,0,0,0" to Margin="0,300,0,0", and size your xaml pad window so you can see the border. On my machine, the drop shadow is now gone.
Anyone else see this? Please help.
I wish I had a good explanation for you, but there were some weird things in your XAML that I played with and I think I have a solution for you.
If you use a Grid, most likely you want to lay out a specific number of rows and columns. You should specify those. This doesn't affect your problem, however.
Likewise, you should specify the Row and Column for your element because you'll eventually need to put this information in your XAML anyway. It's a good habit to start with IMO.
The problem that I can't explain is with the combination of HorizontalAlignment and VerticalAlignment. When you put the Button in the Grid, I would expect the Button to take up the entire space, but it doesn't. The only way you can make this work as far as I could figure out was to specify Height and Width. If you do this, the Effect will work. I found that the threshold in your original XML was a total Y margin of 239. For example, if you used 0,239,0,0, it would fail. If you used 0,139,0,100, it would also fail because the sum is 239. Weird stuff.
Here's my XAML that works:
<Page.Resources>
<DropShadowEffect x:Key="shadow"
Opacity="1"
ShadowDepth="2"
Color="Blue"
BlurRadius="30"/>
</Page.Resources>
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Width="90" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,300,0,0" Grid.Row="0" Grid.Column="0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd"
BorderBrush="Black" BorderThickness="1"
Background="Yellow"
CornerRadius="8"
Effect="{StaticResource shadow}">
<TextBlock Text="Hello out there" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
EDIT The OP does not want to specify a size for the Button because the Content of the Button can change dynamically. It turns out that if you set the MinHeight to something like 18 (I think this is reasonable for most content), the dropshadow effect will work again.
<Border x:Name="Bd" BorderBrush="Black" BorderThickness="1" Background="Yellow" CornerRadius="8" Effect="{StaticResource shadow}" MinHeight="18">
<StackPanel Orientation="Vertical">
<TextBlock>hi</TextBlock>
<TextBlock>there</TextBlock>
</StackPanel>
</Border>