How can i  create Field layouts dynamically and set others setting like margin,width etc?

vikas227,

You could use logic in the SizeChanged of the Window to control the size of the tiles:

void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (e.HeightChanged)
    {
        this.xamTilesControl1.NormalModeSettings.TileConstraints.PreferredHeight = this.xamTilesControl1.ActualHeight / 3-10;
    }
    if (e.WidthChanged)
    {
        this.xamTilesControl1.NormalModeSettings.TileConstraints.PreferredWidth = this.xamTilesControl1.ActualWidth / 3;
    }
}

Let me know if this approach will work for you.

i place that code void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (e.HeightChanged)
    {
        this.xamTilesControl1.NormalModeSettings.TileConstraints.PreferredHeight = this.xamTilesControl1.ActualHeight / 3-10;
    }
    if (e.WidthChanged)
    {
        this.xamTilesControl1.NormalModeSettings.TileConstraints.PreferredWidth = this.xamTilesControl1.ActualWidth / 3;
    }
}

but there is no effect,Xam tiles still not customize according to screen please have a look on xaml Source code and tell me what change i have to do for it(customize according to screen)

  <igTiles:XamTilesControl
      Name="xamTilesControl1"
      HeaderPath="ReportDate"
            Margin="10,0,0,12"
      InterTileSpacingX="5"
      InterTileSpacingY="5"
              
      Theme="LunaNormal">

                <igTiles:XamTilesControl.NormalModeSettings>
                    <igTiles:NormalModeSettings>
                        <igTiles:NormalModeSettings.TileConstraints>
                            <igTiles:TileConstraints MaxHeight="60" MaxWidth="180" />
                        </igTiles:NormalModeSettings.TileConstraints>
                    </igTiles:NormalModeSettings>
                </igTiles:XamTilesControl.NormalModeSettings>



             
                <igTiles:XamTilesControl.MaximizedModeSettings>
                    <igTiles:MaximizedModeSettings VerticalTileAreaAlignment="Top">
                        <igTiles:MaximizedModeSettings.MinimizedExpandedTileConstraints>
                            <igTiles:TileConstraints MinWidth="180"  MaxHeight="60" MaxWidth="180" />
                        </igTiles:MaximizedModeSettings.MinimizedExpandedTileConstraints>
                        <igTiles:MaximizedModeSettings.MinimizedTileConstraints>
                            <igTiles:TileConstraints MinWidth="180"  MaxHeight="60" MaxWidth="180"/>
                        </igTiles:MaximizedModeSettings.MinimizedTileConstraints>
                    </igTiles:MaximizedModeSettings>
                </igTiles:XamTilesControl.MaximizedModeSettings>


                <igTiles:XamTilesControl.Resources>
                    <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
                    <Style x:Key="CaptionButtonStyleBase" TargetType="{x:Type ButtonBase}">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0" Color="#FFffffff"/>
                                            <GradientStop Offset="0.49" Color="#FFe2e2e2"/>
                                            <GradientStop Offset="0.5" Color="#FFcccccc"/>
                                            <GradientStop Offset="1" Color="#FFbbbbbb"/>
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Foreground" Value="Black"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={x:Static RelativeSource.Self}}" Value="True">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStopCollection>
                                                    <GradientStop Offset="0" Color="#FF99ff99"/>
                                                    <GradientStop Offset="0.49" Color="#FF00cc66"/>
                                                    <GradientStop Offset="0.5" Color="#FF009933"/>
                                                    <GradientStop Offset="1" Color="#FF003300"/>
                                                </GradientStopCollection>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="White"/>
                            </DataTrigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStopCollection>
                                                    <GradientStop Offset="0" Color="#FFff9999"/>
                                                    <GradientStop Offset="0.49" Color="#FFcc6666"/>
                                                    <GradientStop Offset="0.5" Color="#FF993333"/>
                                                    <GradientStop Offset="1" Color="#FF990000"/>
                                                </GradientStopCollection>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </Style.Triggers>
                    </Style>
                    <Style x:Key="{x:Static igTiles:TileHeaderPresenter.MaximizeButtonStyleKey}" BasedOn="{StaticResource CaptionButtonStyleBase}" TargetType="{x:Type Button}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <ControlTemplate.Resources>
                                        <Storyboard x:Key="BtnFadeIn">
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MaximizeGlyph" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RestoreGlyph" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </ControlTemplate.Resources>
                                    <Grid>
                                        <Path
                    Width="75"
                    Height="15"
                    Cursor="Hand"
                    Data="M -0.23,15 C-0.23,15 75,15 75,15 75,15 75,0 75,0 75,0 24.76,0 24.76,0 22.26,0 17.99,1.76 16.22,3.53 16.22,3.53 8.30,11.46 8.30,11.46 6.53,13.23 2.26,15 -0.23,15 z"
                    Fill="{TemplateBinding Background}"
                    SnapsToDevicePixels="True"
                    Stretch="Fill"/>
                                        <Path
                    x:Name="MaximizeGlyph"
                    Width="8"
                    Height="7"
                    Margin="12,0,0,0"
                    Data="M 1,3 C1,3 7,3 7,3 7,3 7,6 7,6 7,6 1,6 1,6 1,6 1,3 1,3 zM 0,1 C0,1 0,7 0,7 0,7 8,7 8,7 8,7 8,1 8,1 8,1 8,0.87 8,0.87 8,0.39 7.60,0 7.12,0 7.12,0 0.87,0 0.87,0 0.39,0 0,0.39 0,0.87 0,0.87 0,1 0,1 z"
                    Fill="{TemplateBinding Foreground}"
                    Opacity="0"
                    SnapsToDevicePixels="True"/>
                                        <Path
                    x:Name="RestoreGlyph"
                    Width="8"
                    Height="8"
                    Margin="12,0,0,0"
                    Data="M 1,5 C1,5 2,5 2,5 2,5 5,5 5,5 5,5 5,7 5,7 5,7 1,7 1,7 1,7 1,5 1,5 zM 6,4 C6,4 6,3.87 6,3.87 6,3.39 5.60,3 5.12,3 5.12,3 3,3 3,3 3,3 3,2 3,2 3,2 7,2 7,2 7,2 7,4 7,4 7,4 6,4 6,4 zM 0,4 C0,4 0,8 0,8 0,8 6,8 6,8 6,8 6,5 6,5 6,5 8,5 8,5 8,5 8,1 8,1 8,1 8,0.87 8,0.87 8,0.39 7.60,0 7.12,0 7.12,0 2.87,0 2.87,0 2.39,0 2,0.39 2,0.87 2,0.87 2,1 2,1 2,1 2,3 2,3 2,3 0.87,3 0.87,3 0.39,3 0,3.39 0,3.87 0,3.87 0,4 0,4 z"
                    Fill="{TemplateBinding Foreground}"
                    Opacity="0"
                    SnapsToDevicePixels="True"
                    Visibility="Collapsed"/>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <DataTrigger Binding="{Binding Path=Tag.State, RelativeSource={RelativeSource Self}}" Value="Maximized">
                                            <Setter TargetName="RestoreGlyph" Property="Visibility" Value="Visible"/>
                                            <Setter TargetName="MaximizeGlyph" Property="Visibility" Value="Collapsed"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Path=Tile.IsMouseOver, RelativeSource={x:Static RelativeSource.TemplatedParent}}" Value="True">
                                            <DataTrigger.EnterActions>
                                                <BeginStoryboard x:Name="BtnFadeIn_BeginStoryboard" Storyboard="{StaticResource BtnFadeIn}"/>
                                            </DataTrigger.EnterActions>
                                            <DataTrigger.ExitActions>
                                                <StopStoryboard BeginStoryboardName="BtnFadeIn_BeginStoryboard"/>
                                            </DataTrigger.ExitActions>
                                        </DataTrigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                    <Style TargetType="{x:Type igTiles:TileHeaderPresenter}">
                        <Setter Property="Foreground" Value="White"/>
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0" Color="#FF0099cc"/>
                                            <GradientStop Offset="0.5" Color="#FF003399"/>
                                            <GradientStop Offset="0.50" Color="#FF000066"/>
                                            <GradientStop Offset="1" Color="#FF000099"/>
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="BorderBrush">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0" Color="#00ffffff"/>
                                            <GradientStop Offset="0.20" Color="#FFffffff"/>
                                            <GradientStop Offset="1" Color="#00ffffff"/>
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Padding" Value="4,0,2,0"/>
                        <Setter Property="BorderThickness" Value="0,1,0,0"/>
                        <Setter Property="MinHeight" Value="25"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type igTiles:TileHeaderPresenter}">
                                    <ControlTemplate.Resources>
                                        <Storyboard x:Key="BtnFadeIn">
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="closeBtn" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="maximizeBtn" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </ControlTemplate.Resources>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Border
                    Grid.ColumnSpan="2"
                    Background="{TemplateBinding Background}"
                    CornerRadius="1"
                    SnapsToDevicePixels="True">
                                            <Border
                      Margin="0,1,0,0"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="0,1,0,0"
                      CornerRadius="1"
                      SnapsToDevicePixels="True">
                                                <Grid/>
                                            </Border>
                                        </Border>
                                        <ContentPresenter Margin="5,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                        <Path
                    Width="75"
                    Height="15"
                    Grid.Column="1"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Data="M -0.23,15 C-0.23,15 75,15 75,15 75,15 75,0 75,0 75,0 24.76,0 24.76,0 22.26,0 17.99,1.76 16.22,3.53 16.22,3.53 8.30,11.46 8.30,11.46 6.53,13.23 2.26,15 -0.23,15 z"
                    Fill="White"
                    SnapsToDevicePixels="True"
                    Stretch="Fill"
                    Visibility="Collapsed"/>
                                        <Path
                    Width="186"
                    Height="16"
                    Grid.ColumnSpan="3"
                    HorizontalAlignment="Right"
                    Margin="0,0,0,1"
                    VerticalAlignment="Bottom"
                    Data="M 0,15 C0,15 0,16 0,16 0,16 110.76,16 110.76,16 113.26,16 117.53,14.23 119.30,12.46 119.30,12.46 127.22,4.53 127.22,4.53 128.99,2.76 133.26,1 135.76,1 135.76,1 186,1 186,1 186,1 186,0 186,0 186,0 135.76,0 135.76,0 133.26,0 128.99,1.76 127.22,3.53 127.22,3.53 119.30,11.46 119.30,11.46 117.53,13.23 113.26,15 110.76,15 110.76,15 0,15 0,15 z"
                    SnapsToDevicePixels="True"
                    Stretch="Fill">
                                            <Path.Fill>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                    <LinearGradientBrush.GradientStops>
                                                        <GradientStopCollection>
                                                            <GradientStop Offset="0" Color="#00ffffff"/>
                                                            <GradientStop Offset="0.34" Color="#FFffffff"/>
                                                            <GradientStop Offset="1" Color="#00ffffff"/>
                                                        </GradientStopCollection>
                                                    </LinearGradientBrush.GradientStops>
                                                </LinearGradientBrush>
                                            </Path.Fill>
                                        </Path>
                                        <DockPanel
                    Grid.Column="1"
                    Grid.ColumnSpan="1"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom">
                                            <Button
                      x:Name="maximizeBtn"
                      ClickMode="Release"
                      Command="{x:Static igTiles:Tile.ToggleMaximizedCommand}"
                      CommandParameter="{TemplateBinding Tile}"
                      DockPanel.Dock="Right"
                      Focusable="False"
                      Style="{DynamicResource {x:Static igTiles:TileHeaderPresenter.MaximizeButtonStyleKey}}"
                      Tag="{TemplateBinding Tile}"
                      Visibility="{Binding Tile.MaximizeButtonVisibilityResolved, RelativeSource={RelativeSource TemplatedParent}}"/>
                                            <Button
                      x:Name="closeBtn"
                      Command="{x:Static igTiles:Tile.CloseCommand}"
                      CommandParameter="{TemplateBinding Tile}"
                      DockPanel.Dock="Right"
                      Focusable="False"
                      Opacity="0"
                      Style="{DynamicResource {x:Static igTiles:TileHeaderPresenter.CloseButtonStyleKey}}"
                      Visibility="{Binding Tile.CloseButtonVisibilityResolved, RelativeSource={RelativeSource TemplatedParent}}"/>
                                            <Image
                      x:Name="image"
                      DockPanel.Dock="Left"
                      Source="{Binding Tile.Image, RelativeSource={RelativeSource TemplatedParent}}"
                      Stretch="None"
                      Visibility="{Binding Tile.HasImage, Converter={StaticResource BoolToVisConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                                        </DockPanel>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </igTiles:XamTilesControl.Resources>

            
                <igTiles:XamTilesControl.ItemTemplateMaximized>
                    <DataTemplate >
                        <StackPanel Margin="10, 10, 0, 0">
                        

                       
                        </StackPanel>
                   
                    </DataTemplate>
                </igTiles:XamTilesControl.ItemTemplateMaximized>
                <igTiles:XamTilesControl.ItemTemplate>
                    <DataTemplate>
                      
                      

                       
                    </DataTemplate>
                </igTiles:XamTilesControl.ItemTemplate>
            </igTiles:XamTilesControl>

Hello,

When the code was added, did you also add the event handler.  To verify that the event is wired up correctly place a break point in the event handler and see if it is hit when you resize the window.  If the break point is not hit check to see that you have wired up the event either in XAML or in C# code.

Let me know if you have any questions with this matter.

Hi..

i checked it,window event is firing.why it not working.please check the Xaml code i think i have to change some where in it..

igTiles:XamTilesControl.MaximizedModeSettings>
                    <igTiles:MaximizedModeSettings VerticalTileAreaAlignment="Top">
                        <igTiles:MaximizedModeSettings.MinimizedExpandedTileConstraints>
                            <igTiles:TileConstraints MinWidth="180"  MaxHeight="60" MaxWidth="180" />
                        </igTiles:MaximizedModeSettings.MinimizedExpandedTileConstraints>
                        <igTiles:MaximizedModeSettings.MinimizedTileConstraints>
                            <igTiles:TileConstraints MinWidth="180"  MaxHeight="60" MaxWidth="180"/>
                        </igTiles:MaximizedModeSettings.MinimizedTileConstraints>
                    </igTiles:MaximizedModeSettings>
                </igTiles:XamTilesControl.MaximizedModeSettings

Hello,

It will work if you also set the MaxHeight, MinHeight, MaxWidth, and MinWidth as well:

void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (e.HeightChanged)
    {
        this.xamTilesControl1.NormalModeSettings.TileConstraints.PreferredHeight =
        this.xamTilesControl1.NormalModeSettings.TileConstraints.MinHeight =
        this.xamTilesControl1.NormalModeSettings.TileConstraints.MaxHeight
        =this.xamTilesControl1.ActualHeight / 3 - 10;
    }
    if (e.WidthChanged)
    {
        this.xamTilesControl1.NormalModeSettings.TileConstraints.PreferredWidth =
            this.xamTilesControl1.NormalModeSettings.TileConstraints.MinWidth =
            this.xamTilesControl1.NormalModeSettings.TileConstraints.MaxWidth
            = this.xamTilesControl1.ActualWidth / 3;
    }
}

Let me know if you have any questions with this matter.

vikas227,

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