WPF custom datagrid phantom header overlap - custom-controls

I have written a custom control which derives from Datagrid.
When I use the custom grid, it displays an overlapping column header behind others and I'm not sure why.
Here's a screenshot of my issue:
Here's the XAML I use to call it:
<FDG:FilterDataGrid x:Name ="Jurisds" MaxHeight="400" AutoGenerateColumns="False" VerticalScrollBarVisibility="Visible" HeadersVisibility="Column">
<DataGrid.Columns>
<DataGridTextColumn Header="Region" Binding = "{Binding Region, Mode=OneWay}"/>
<DataGridTextColumn Header = "Municipality" Binding = "{Binding Jurisd, Mode=OneWay}"/>
<DataGridTextColumn Header = "Analysis" Binding = "{Binding AnalysisExists, Mode=OneWay}" />
<DataGridTextColumn Header = "Brief" Binding = "{Binding StratBriefExists, Mode=OneWay}" />
<DataGridHyperlinkColumn Header="Missing Nbhds" Binding="{Binding MissingNbhds, Mode=OneWay}">
<DataGridHyperlinkColumn.ElementStyle>
<Style>
<EventSetter Event="Hyperlink.Click" Handler="nbhdsScreen"/>
</Style>
</DataGridHyperlinkColumn.ElementStyle>
</DataGridHyperlinkColumn>
<DataGridHyperlinkColumn Header="All Strats Approved" Binding="{Binding StratsApproved, Mode=OneWay}">
<DataGridHyperlinkColumn.ElementStyle>
<Style>
<EventSetter Event="Hyperlink.Click" Handler="stratsScreen"/>
</Style>
</DataGridHyperlinkColumn.ElementStyle>
</DataGridHyperlinkColumn>
</DataGrid.Columns>
</FDG:FilterDataGrid>
In the code-behind I set the ItemsSource to an object called JurisdictionData.
It looks like it's auto-generating a column header and then generating the proper columns. Why is it creating this JurisdictionData header and how do I stop/remove it?

A DataGridColumnHeader object uses contains a DataGridColumnHeadersPresenter object.
The custom Data Grid that I wrote create a custom style for the DataGridColumnHeader, but not for the DataGridColumnHeadersPresenter.
To correct the issue, I created a style for the DataGridColumnHeadersPresenter which contained only the ItemsPresenter in the custom datagrid Style.Resources section.
<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Grid>
<!--<DataGridColumnHeader x:Name="PART_FillerColumnHeader" IsHitTestVisible="False" />-->
<ItemsPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Answer about PART_FillerColumnHeader.

Related

Is there any way to have such a double border on button in Xamarin?

I have to make a button with double borders as shown on the image bellow. Is there any way to make it with double border without adding additional xaml elements except the button.
On the latest versions of XF that should be fairly easy to do (make sure you optimize this code for your usage):
Create a border-style:
<Style TargetType="Border">
<Setter Property="Padding" Value="10" />
<Setter Property="Stroke" Value="Black" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="HorizontalOptions" Value="Fill"/>
<Setter Property="StrokeShape">
<Setter.Value>
<RoundRectangle CornerRadius="10" />
</Setter.Value>
</Setter>
</Style>
Once done use it as below:
<Border Stroke="Blue" StrokeThickness="5" Padding="8" BackgroundColor="White">
<Button BackgroundColor="Blue" Text="Submit"/>
</Border>
To add events to this whole view you might have to set the button's InputTransparent property to True and then add a Gesture to the whole View
Once done it would look like the image below:

Xamarin.Forms ImageButton Display Issue

I am trying to use an ImageButton in a StackLayout and attempting to set the text of the button to be set below the image. However, the text is always displayed on the right side of the image instead of below. here is the code:
<?xml version="1.0" encoding="utf-8" ?>
<StackLayout x:Class="MyApp.Portable.Controls.MyNavigationControl"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
xmlns:forms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Libraries.PCL"
x:Name="MyNavControl"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
MinimumHeightRequest="75"
Orientation="Horizontal">
<StackLayout.Resources>
<ResourceDictionary>
<Style x:Key="NavButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="White" />
<Setter Property="TextColor" Value="Gray" />
<Setter Property="FontSize" Value="7" />
</Style>
</ResourceDictionary>
</StackLayout.Resources>
<forms:ImageButton x:Name="GpsButton"
Clicked="GpsBUttonClicked"
Image="GPS_Icon_Light_Gray_sm.png"
MinimumHeightRequest="75"
Orientation="ImageOnBottom"
Style="{StaticResource NavButtonStyle}"
Text="GPS"
VerticalOptions="Start" />
<StackLayout>
In case you haven't found it yet, here is the answer to your question. The problem is a matter of using the incorrect property to set the Image. The ImageButton.Image property will display the image however it will not adhere to any other set properties such as ImageButton.Orientation. To solve your issue you must set the ImageButton.Source property instead.
More info can be found here: https://github.com/XLabs/Xamarin-Forms-Labs/issues/235

How to create a reusable path style to show a custom shape?

I'm trying to figure it out how to reuse a style (specifically the Data property) for a path that's on a Resource Dictionary.
Here's my problem:
ResourceDictionary.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Path" x:Key="FlashOn">
<Setter Property="Data">
<Setter.Value>
F1M376.251,632.755L385.665,632.755 381.302,646.07 394.618,646.07 389.11,660.302 393.01,660.302 381.531,672.93 377.398,660.763 381.073,660.763 383.829,652.268 369.825,652.268 376.251,632.755z
</Setter.Value>
</Setter>
<Setter Property="Fill" Value="#FFFFFF"></Setter>
<Setter Property="Stretch" Value="Fill"></Setter>
<Setter Property="Height" Value="25"></Setter>
<Setter Property="Width" Value="25"></Setter>
</Style>
</ResourceDictionary>
And trying to use it on a page like this:
<Path Style="{StaticResource FlashOn}"/>
or like this
System.Windows.Shapes.Path p = new System.Windows.Shapes.Path();
p.Style = Application.Current.Resources["FlashOn"] as Style;
The first time I load the page the shape will appear perfectly, BUT if I go back and then go again to that page the all the styles are available EXCEPT for the Data which does not have any information at all. So, I can stylize all the properties in a custom shape except for the Data property.
**Just to note, If the style is inline everything works. I just don't want to repeat code if I use the same path several times in the app.
<Path Width="25" Height="25" Stretch="Fill" Fill="#FFFFFF" Data="F1M376.251,632.755L385.665,632.755 381.302,646.07 394.618,646.07 389.11,660.302 393.01,660.302 381.531,672.93 377.398,660.763 381.073,660.763 383.829,652.268 369.825,652.268 376.251,632.755z" />
No sweat, just turn it into a Content Control;
<Style x:Key="MyAwesomePath" TargetType="ContentControl">
<!-- Add additional Setters Here -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Path Data="F1M376.251,632.755L385.665,632.755 381.302,646.07 394.618,646.07 389.11,660.302 393.01,660.302 381.531,672.93 377.398,660.763 381.073,660.763 383.829,652.268 369.825,652.268 376.251,632.755z"
Fill="#FFFFFFFF"
Stretch="Fill"
Height="25" Width="25"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Margin="{TemplateBinding Margin}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then invoke it;
<ContentControl Style="{StaticResource MyAwesomePath}"/>
This does a couple things for you, like not making your app re-draw the Path every instance so optimizes things. It also allows you (if you wanted/needed to) to bind dependency properties like Width/Height/Alignment/Margin or whatever you need to the template so you can specify them inline if you need to or you can keep them hard coded values like you have them. Hope this helps.

How can i set the background of a grid?

Im playing around with styles, and want to set the background of the Grid, something like this:
<Style TargetType="Grid">
<Setter Property="Background" Value="Background.png" />
</Style>
But this does not work, what is the correct way... and how could I do it like I do it with classes in css as I want it to affect every Grid, the one the wraps the page?
You can set the background property directly like so.
<Grid x:Name="ContentPanel" Style="{StaticResource GridStyle1}">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="/BackgroundImage.png"/>
</Grid.Background>
</Grid>
If you want to create a style resource, you can set the value like so
<phone:PhoneApplicationPage.Resources>
<Style x:Key="GridStyle1" TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/BackgroundImage.png" Stretch="Fill"/>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid Style="{StaticResource GridStyle1}"/>
I recommend using Expression Blend to help you to discover how to work with styles. It will generate control templates for you so you can see how they are structured.
you can do it like this
<Grid x:Name="myGrid">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/myimage.png"/>
</Grid.Background>
</Grid>

How can apply the templateBinding on image button in silverlight

I am new on using Sliverlight. Hope someone can help me. I need the image buttons to show the order is on the complete or process status. The click event functions of these two are same to navigate the same page. Currently I created two customer Image Button on App.xaml because the Source of this image cannot do “TemplateBinding” ; the button doesn’t has this property. Is it a better way to do it? If so, would you provide the code or link, so I can learn from it? Thanks.
There is my code:
<Style x:Key="btnComplete" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<Image Height="50" Width="120" Stretch="none" Source="../images/btnComplete.png"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The simplest way to achive this is to create a transparent controltemplate for the button and add image as content to the button anywhere you want.
The button code in your page will be like below.
<Button Height="100" Width="100" Style="{StaticResource TransparentButtonStyle}" Click="TwitterBtn_Click">
<Image Height="100" Source="YourIcon.png" Width="100"/>
</Button>
And the TransparentButtonStyle can be declared in App.xaml . Thats all!
<Style x:Key="TransparentButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here's an implementation of ImageButton for wp7. I've used this example and modified it for various things:
http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/
Also you can check out the Codeing4Fun controls & source, specifically the buttons.
http://coding4fun.codeplex.com/
update: Telerik has an ImageButton control for wp7 now as well.

Resources