Custom Design -

Oct 25, 2010 at 5:02 PM
Edited Oct 25, 2010 at 5:04 PM

Hi,

I am trying to use your library for implementing a Silverlight custom flow layout, based on your Templatization sample.

My question is how to extend the design to implement a custom data-bindable template. I've tried changing the item template but what I put inside does not get affected by the interaction (inside the InFlowContentControl). So for the "content" to be affected I suppose I have to put it into the InFlowContentControl here:

<fl:InFlowContentControl Content="{Binding ColorName}" Background="{Binding Brush}" HeadingBackground="{Binding HeaderBrush}" Width="150" Height="150" />

As putting it in the ItemTemplate is not working properly, like shown next:

<DataTemplate x:Key="itemTemplate">
    <Grid>
        <fl:InFlowContentControl
        Background="{Binding Brush}"
        HeadingBackground="{Binding HeaderBrush}"
        Width="300" Height="300" Cursor="Hand" ToolTipService.ToolTip="sdasdf"
        Content="{Binding ColorName}" />
        <StackPanel Orientation="Vertical" Margin="20">
        <TextBlock Text="{Binding Name}"  TextWrapping="Wrap" d:LayoutOverrides="Width"/>
        <TextBlock Text="{Binding PictureLink}"  TextWrapping="Wrap" />
        <TextBlock Text="{Binding URIToLaunch}" TextWrapping="Wrap" />
        <Button Content="Open Demo"/>
        </StackPanel>
    </Grid>
</DataTemplate>

This databinds properly but does not animate and react properly so I suppose I have to put all the databinding custom elements inside the InFlowContentControl Template...  I have tried but I lose all the binding when doing so... could you provide any guidance?

Playing I have deduced I can add some content with the Heading & Content directly but it's pretty uncertain how to do things.

Could you kindly indicate me how I can change the default presentation? I just want to add a picture to fill the whole "FlowItem" and adding a title to it. Everything Databould preferably.

Thanks a lot for this project, it is really nice - now we need just a bit of push on how to use it ... :)

Oct 25, 2010 at 5:12 PM

To be more clear, I have tried to extend the HeadingTemplate and ContentTemplate :

        <fl:InFlowContentControl 
        	Background="{Binding Brush}" 
        	HeadingBackground="{Binding HeaderBrush}" 
        	Width="300" Height="300" Cursor="Hand" ToolTipService.ToolTip="sdasdf" 
        	Content="{Binding ColorName}" 
			Heading="asdfa" ContentTemplate="{StaticResource InFlowContentControlDataTemplate}" 
			HeadingTemplate="{StaticResource DataTemplateHeader}"
			/>

With:

        <DataTemplate x:Key="DataTemplateHeader">
        	<StackPanel Height="100" Width="100" Orientation="Horizontal">
        		<TextBlock TextWrapping="Wrap" Text="Fixed text - "/>
				<TextBlock TextWrapping="Wrap" Text="{Binding ColorName}"/>
        	</StackPanel>
        </DataTemplate>

and:

        <DataTemplate x:Key="InFlowContentControlDataTemplate">
			<Grid x:Name="LayoutRoot" Clip="M0.5,20.5 C0.5,9.4543047 9.4543047,0.5 20.5,0.5 L279.5,0.5 C290.54568,0.5 299.5,9.4543047 299.5,20.5 L299.5,229.5 C299.5,240.5457 290.54568,249.5 279.5,249.5 L20.5,249.5 C9.4543047,249.5 0.5,240.5457 0.5,229.5 z">
				<Grid.RowDefinitions>
					<RowDefinition Height="0.826*"/>
					<RowDefinition Height="0.174*"/>
				</Grid.RowDefinitions>
				
				<Rectangle Fill="#FF0D0D0E" Stroke="Black" Grid.RowSpan="2" RadiusY="20" RadiusX="20"/>
				<Image Margin="0" Grid.RowSpan="2" Source="media/windowsmcedemosilverlight.jpg" Stretch="UniformToFill"/>
				
				<TextBlock TextWrapping="Wrap" Text="asdfadf" 
						Grid.Row="1" HorizontalAlignment="Center" FontWeight="Bold" 
						FontSize="21.333" Foreground="#FFFFFBFB"/>
			</Grid>
        </DataTemplate>

Hope it makes clear what I am trying to do.

Thanks again!

 

 

 


Coordinator
Oct 25, 2010 at 5:34 PM
Hi,
If you replace Heading=”asdfa” by Heading=”{Binding}” and Content=”{Binding ColorName}” by Content=”{Binding}” it should work.
Regards,
Simon
From: joslat
Sent: Monday, October 25, 2010 7:12 PM
Subject: Re: Custom Design - [slflow:232250]

From: joslat

To be more clear, I have tried to extend the HeadingTemplate and ContentTemplate :

        <fl:InFlowContentControl 
        	Background="{Binding Brush}" 
        	HeadingBackground="{Binding HeaderBrush}" 
        	Width="300" Height="300" Cursor="Hand" ToolTipService.ToolTip="sdasdf" 
        	Content="{Binding ColorName}" 
			Heading="asdfa" ContentTemplate="{StaticResource InFlowContentControlDataTemplate}" 
			HeadingTemplate="{StaticResource DataTemplateHeader}"
			/>

With:

        <DataTemplate x:Key="DataTemplateHeader">
        	<StackPanel Height="100" Width="100" Orientation="Horizontal">
        		<TextBlock TextWrapping="Wrap" Text="Fixed text - "/>
				<TextBlock TextWrapping="Wrap" Text="{Binding ColorName}"/>
        	</StackPanel>
        </DataTemplate>

and:

        <DataTemplate x:Key="InFlowContentControlDataTemplate">
			<Grid x:Name="LayoutRoot" Clip="M0.5,20.5 C0.5,9.4543047 9.4543047,0.5 20.5,0.5 L279.5,0.5 C290.54568,0.5 299.5,9.4543047 299.5,20.5 L299.5,229.5 C299.5,240.5457 290.54568,249.5 279.5,249.5 L20.5,249.5 C9.4543047,249.5 0.5,240.5457 0.5,229.5 z">
				<Grid.RowDefinitions>
					<RowDefinition Height="0.826*"/>
					<RowDefinition Height="0.174*"/>
				</Grid.RowDefinitions>
				
				<Rectangle Fill="#FF0D0D0E" Stroke="Black" Grid.RowSpan="2" RadiusY="20" RadiusX="20"/>
				<Image Margin="0" Grid.RowSpan="2" Source="media/windowsmcedemosilverlight.jpg" Stretch="UniformToFill"/>
				
				<TextBlock TextWrapping="Wrap" Text="asdfadf" 
						Grid.Row="1" HorizontalAlignment="Center" FontWeight="Bold" 
						FontSize="21.333" Foreground="#FFFFFBFB"/>
			</Grid>
        </DataTemplate>

Hope it makes clear what I am trying to do.

Thanks again!



Read the full discussion online.

To add a post to this discussion, reply to this email (mailto:slflow@discussions.codeplex.com?subject=[slflow:232250])

To start a new discussion for this project, email slflow@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com

Oct 25, 2010 at 8:17 PM

Wow, left that on. silly on me :).

Thanks Simon, appreciated!!

Best,

Jose