XAML/WPF Question

[NJA_MC]

Okay, I am very green with the WPF dialog box stuff. Really cool stuff, but troubling at times!

I have this DatePicker from VS2013 layed out and it looks fine in VS2013, once I use it within NT8 (the dynamic load example within the AddOns) it gets corrupted a bit. The DATE field gets covered over as the "Calendar" part centers within the field making it unreadable. Also, the buttons seems to be corrupt a little as well as you can see with the red arrow (bottom part of text).

Here is the DatePicker XAML:

<DatePicker Height="30" HorizontalAlignment="Left" Margin="38,0,0,0" x:Name="datePickerStart" VerticalAlignment="Top" Width="115" />
<DatePicker Height="30" HorizontalAlignment="Right" Margin="0,0,113,0" x:Name="datePickerEnd" VerticalAlignment="Top" Width="115" Grid.Column="1" />

And this is the button XAML:

<Button x:Name="LoadConfiguration" Content="LoadConfig" HorizontalAlignment="Left" Margin="24,35,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="22"/>
<Button x:Name="Details" Content="Show Details" HorizontalAlignment="Left" Margin="134,35,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="22"/>
<Button x:Name="Refresh" Content="Refresh Data" HorizontalAlignment="Left" Margin="239,34,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="22" Grid.ColumnSpan="2"/>

I haven't mastered the DataGrid yet either, but that is a question for another time. Any help would be appreciated as this is very new to me.

[NinjaTrader_MichaelM]

Hello NJA_MC,

I am currently investigating this issue and will update you shortly.

Thank you for your patience in the meantime.

[Calonious]

The buttons are probably due to the static height you set. Try either changing the font size for the control or setting the height to auto.

<Button x:Name="LoadConfiguration" Content="LoadConfig" HorizontalAlignment="Left" Margin="24,35,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="Auto"/>

<Button x:Name="LoadConfiguration" Content="LoadConfig" HorizontalAlignment="Left" Margin="24,35,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="22" FontSize="10"/>

For the datepicker I have not seen this. It might be part of the styling being applied to the controls. You can try turning that off for the datepickers by adding this, and see if has any difference-
<DatePicker Style="{x:Null}" />

[NinjaTrader_MichaelM]

Hello,

The XAML you create in Visual Studio complies with a Window where as in NinjaTrader it needs to comply with a Page inside of a NTWindow. This is not the same layout.

Using the Visual Studio editor with any sort of non dynamic sizing will likely result in similar issues in NinjaTrader 8. I would not recommend using the Visual Studio editor when working with visual items.

Nothing is getting corrupted per say however these controls are cropped and styled differently than expected. NinjaTrader 8 styles some controls internally so you may need to set them to the default style/control template for them to display the same way as they do in Visual Studio. This is potentially what is happening with the DatePicker, where the calendar icon is normally to the right of the text field as opposed to how it is displaying in your image.

EDIT: Thank you Calonious for the specific code examples.

Please let me know if you have any questions.

[NJA_MC]

The buttons are probably due to the static height you set. Try either changing the font size for the control or setting the height to auto.

<Button x:Name="LoadConfiguration" Content="LoadConfig" HorizontalAlignment="Left" Margin="24,35,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="Auto"/>

<Button x:Name="LoadConfiguration" Content="LoadConfig" HorizontalAlignment="Left" Margin="24,35,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="22" FontSize="10"/>

For the datepicker I have not seen this. It might be part of the styling being applied to the controls. You can try turning that off for the datepickers by adding this, and see if has any difference-
<DatePicker Style="{x:Null}" />

Thanks,

This worked for the DatPicker, looks like I will need to lay it out again as it looks like it needs its own column.

 <DatePicker Style="{x:Null}" x:Name="datePickerStart"/>

The TEXT with the font size works well:

<Button FontSize="10" x:Name="LoadConfiguration" Content="LoadConfig" HorizontalAlignment="Left" Margin="24,35,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="22"/>
<Button FontSize="10" x:Name="Details" Content="Show Details" HorizontalAlignment="Left" Margin="134,35,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="22"/>
<Button FontSize="10" x:Name="Refresh" Content="Refresh Data" HorizontalAlignment="Left" Margin="239,34,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Height="22" Grid.ColumnSpan="2"/>

[Calonious]

I played with it a bit to see where I could lend a hand on the DatePicker.

I noticed that when I set the width to auto, it will adjust to the content in the textbox. The button for the calendar still leaves a bigger portion open. Even with no style being added it still wants to pull it out like that.
DatePicker -
http://puu.sh/j9jRe/a883182974.png

HardCoded -
http://puu.sh/j9jTc/f9dfe80e4c.png

I'll keep playing with it unless you get there first or anyone else.


Additionally, (and this is my two cents with XAML) I think that you should use Auto for the height as it will allow for dynamic loading of the buttons with the automatic styling that's being applied. Not saying that what you are doing is wrong but this will help with any sizing issues down the road or immediate future.

[NinjaTrader_MichaelM]

Hello NJA_MC,

You can override the default button padding which is creating the oddly displaying calendar icon using the following:

<Grid>
  <Grid.Resources>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Padding" Value="0" />
    </Style>
  </Grid.Resources>
  <!-- etc... -->

You may need to add the following into the XAML namespace if you haven't already for this to work:

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

This code will affect all buttons and is just an example to show what was affecting the DatePicker. You can create a custom DatePicker style to manually adjust the calendar icon if you want to leave all other buttons unchanged.

This Microsoft document publicly available on the internet may give you some further insight: https://msdn.microsoft.com/en-us/lib...(v=vs.95).aspx

Alternatively, you can avoid this altogether and use the DatePicker that comes with NinjaTrader 8.

The date picker requires a reference to:
Program Files (x86)\NinjaTrader 8\bin\InfragisticsWPF4.Editors.v13.2.dll

Datepicker xaml -

xmlns:ie="http://infragistics.com/Editors" <!-- needed in the xaml namespace -->

<ie:XamDateTimeEditor Grid.Column="0" Grid.Row="0" IsAlwaysInEditMode="True" x:Name="dtpDownloadFrom" Mask="{}{date}"></ie:XamDateTimeEditor>

Datepicker c# -
Infragistics.Windows.Editors.XamDateTimeEditor

To find the Datepicker in C# that was declared in xaml -

datePicker = LogicalTreeHelper.FindLogicalNode(rootObject, "dtpDownloadFrom") as Infragistics.Windows.Editors.XamDateTimeEditor;

Please let me know if I may be of further assistance.

[traderpards]

Thanks!! Bottom line:
Style="{x:Null}" fixes jacked up controls.