Hello,
I recently discovered an issue with the XamDateTimeEditor where it clips the end of the text with certain fonts. I attached an example of the issue (is it not possible to embed attached pictures anymore?). My XAML is as follows:
<igEditors:XamDateTimeEditor Grid.Column="1" x:Name="time2" Mask="hh:mm:ss" Value="{Binding Time2}" Theme="Aero" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Stretch" FontSize="11" FontWeight="Bold" FontFamily="Lucida Console" Background="{StaticResource InputFieldBackgroundBrush}" BorderBrush="{StaticResource InputFieldBorderBrush}" Foreground="{StaticResource FalconLabelBrush}" SpinButtonDisplayMode="OnlyInEditMode" SpinWrap="True" AllowDropDown="False" InvalidValueBehavior="RetainValue"/>
As you can see, I'm not doing anything particularly special, just a typical time editor control. When the font is set to Meiryo for example, the text is not clipped, but with Lucida Console set, the right part of the last character is sometimes clipped off. Is there someway to fix this?
Thank you for your post. I have been looking into it and I can suggest you set the XamDateTimeEditor’s UseLayoutRounding Property to True. Please let me know if this helps you or you need further assistance on this matter.
Looking forward for your reply.
Hello Stefan,
UseLayoutRounding="True" was already set on the DataGrid that contained the XamDateTimeEditor control, but I tried setting it on the control itself as well, however, neither setting had any effect. In case it will help with your testing, here's the code for the column the editor is in:
<DataGridTemplateColumn Width="97" x:Name="Column11" Header="Time1"> <DataGridTemplateColumn.HeaderStyle> <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource columnHeaderCommon}"> <Setter Property="Margin" Value="-1,0,0,0"/> <Setter Property="BorderThickness" Value="1,0,1,1"/> </Style> </DataGridTemplateColumn.HeaderStyle> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="17"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <CheckBox Grid.Column="0" VerticalAlignment="Center" IsChecked="{Binding Time1Flag}"/> <igEditors:XamDateTimeEditor Grid.Column="1" x:Name="time1" Mask="hh:mm:ss" Value="{Binding Time1}" Margin="0" Padding="0" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Stretch" FontSize="12" FontWeight="Bold" FontFamily="Lucida Console" Theme="Aero" Background="{StaticResource InputFieldBackgroundBrush}" BorderBrush="{StaticResource InputFieldBorderBrush}" Foreground="{StaticResource FalconLabelBrush}" SpinButtonDisplayMode="OnlyInEditMode" SpinWrap="True" AllowDropDown="False" InvalidValueBehavior="RetainValue" UseLayoutRounding="True" /> </Grid> <DataTemplate.Triggers> <Trigger SourceName="time1" Property="IsInEditMode" Value="False"> <Setter TargetName="time1" Property="Background" Value="Transparent"/> <Setter TargetName="time1" Property="BorderBrush" Value="Transparent"/> <Setter TargetName="time1" Property="Foreground" Value="Black"/> </Trigger> <DataTrigger Binding="{Binding IsNullItem}" Value="True"> <Setter TargetName="time1" Property="IsEnabled" Value="False"/> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn>
Also, the clipping only occurs when the control is in edit mode. When the XamDateTimeEditor is not in edit mode it displays the text correctly without clipping the end.
Great, thank you Stefan.
I was fiddling with the control today trying to figure out a different control and I noticed that if I set UseLayoutRounding to false it actually doesn't clip the text anymore. Not ideal, but a temporary fix until the service release comes out.
Speaking of trying to figure out a different issue with the control, I recently reduced the height of the control (well actually, reduced the height of the containing datagrid row). After reducing the height of the control the arrow marks on the up/down buttons start looking strange... The control still has plenty of space to display in, so it seems very strange to me that at this height the appearance of the buttons becomes warped. Please let me know how I can fix this issue.
Thanks!
You can add the following DataTempalte for the GlyphArrow:
<DataTemplate x:Key="{x:Static igEditors:EditorsBrushKeys.DecreaseGlyphKey}"> <Path VerticalAlignment="Bottom" Width="5" Height="3" Data="M 2,3 C2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 0,1 0,0 0,0 0,0 5,0 5,0 5,0 5,1 5,1 5,1 4,1 4,1 4,1 4,2 4,2 4,2 3,2 3,2 3,2 3,3 3,3 3,3 2,3 2,3 z" Fill="{DynamicResource {x:Static igEditors:EditorsBrushKeys.DropdownBtnGlyphNormalForegroundFillKey}}"/> </DataTemplate>
where I set the vertical alignment to Bottom, so the two arrows could be cut equally, when there is not enough space for rendering. Please let me now if this helps you or you need further assistance on this matter.
Thank you, this is helpful. When I use this DataTemplate the bottom arrow displays more like I would expect it too. However, it still looks a little bit different than the top arrow. I think maybe the best solution for me might be to retemplate the datepicker XamDateTimeEditor control to get rid of the margins around the buttons to maximize the space available for the arrows. Could you please provide me with the XAML for the XamDateTimeEditor so I can retemplate it?
Thanks again!
You can find the default Style of the XamDateTimeEditor here:
C:\Program Files (x86)\Infragistics\NetAdvantage 2011.2\WPF\DefaultStyles\Editors\EditorsGeneric.xaml file
Great, thank you!