CODEWITHSUNDEEP
c#wpfxamlwindows-phone-7windows-phone-8
KeepAlive
KeepAlive

Reputation: 227

XAML Templates for default winphone UI (especially SMS)

Are there any Free avaible XAML-Templates for default Views you see in the microsoft apps or even third-party apps like Facebook, Whatsapp, ...?

Im looking for a Template to Show a message Thread, similar to the one used in the SMS or Whatsapp Apps. On my way to develop my App (Social Platform app with messaging, updates and many more features) I had several problems implementing default UI Views as Microsoft seems not to support us as developers. So hopefully anyone in the community created some templates and is sharing them.

I would also be Thankful for any Links to developer communities like the one Nokia offers.

Upvotes: 1

Views: 664

Answers (1)

ZombieSheep
ZombieSheep

Reputation: 29953

A Quick and dirty solution to your SMS template request would be this. It honours the phone's accent colour but may need some more tweaking to get the correct differences in colour for the incoming vs. outgoing message boxes. It would also be worth moving the color resources outside the declarations of the items to ensure they are re-used.

<!-- incoming message template -->
<Grid Width="294" HorizontalAlignment="Left" Margin="20,0,0,10">
    <Grid.Resources>
        <SolidColorBrush x:Key="IncomingColor" Color="{StaticResource PhoneAccentColor}" />
        <SolidColorBrush x:Key="MessageForeground" Color="White" />
        <SolidColorBrush x:Key="TimeForeground" Color="White" Opacity="0.6" />
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="18"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Path Fill="{StaticResource IncomingColor}" Data="M19 18 l 0 -18 l 24 18 z" />
    <Grid Background="{StaticResource IncomingColor}" Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Message content goes in here. It should wrap and take as many lines as are required to display the whole thing" TextWrapping="Wrap" Margin="10,10,10,0" Foreground="{StaticResource MessageForeground}"/>
        <TextBlock Grid.Row="1" Text="17:53" Margin="10,0,10,10" HorizontalAlignment="Right" Foreground="{StaticResource TimeForeground}"/>
    </Grid>
</Grid>

<!-- outgoing message template -->
<Grid Width="294" HorizontalAlignment="Right" Margin="0,10,20,0">
    <Grid.Resources>
        <SolidColorBrush x:Key="OutgoingColor" Opacity="0.7" Color="{StaticResource PhoneAccentColor}" />
        <SolidColorBrush x:Key="MessageForeground" Color="White" />
        <SolidColorBrush x:Key="TimeForeground" Color="White" Opacity="0.6" />
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="18"/>
    </Grid.RowDefinitions>
    <Path Grid.Row="1" Fill="{StaticResource OutgoingColor}" Data="M 275 0 l 0 18 l -24 -18 z" />
    <Grid Background="{StaticResource OutgoingColor}" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Message content goes in here." TextWrapping="Wrap" Margin="10,10,10,0" Foreground="{StaticResource MessageForeground}"/>
        <TextBlock Grid.Row="1" Text="17:53" Margin="10,0,10,10" HorizontalAlignment="Right" Foreground="{StaticResource TimeForeground}"/>
    </Grid>
</Grid>

Upvotes: 3

Related Questions