How to remove the border in Coding4Fun MessagePrompt - windows-phone-7

I followed this example to display my usercontrol inside Coding4Fun MessagePrompt.
http://windowsphonegeek.com/articles/Creating-a-Windows-Phone-7-Trial-Application-Adding-Buy-Now-Functionality
When the Home icon at the bottom of the page is clicked I open MessagePromt which has my UserControl with two buttons as shown in image below.
But for some reason there appears this light white border, I am unable to determine from where it is coming.
Note: I have set border Transparent and 0 thickness for my usercontorl and all controls inside it.
I just want to show the blue panel and no white border and it's width is 300 as what it is seen.
Does any one has any idea?

I got help from "Eric Fleck - Microsoft" on apphub forums. Here's his solution:
<phone:PhoneApplicationPage
...
xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls">
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="MsgPropmtNoBorder" TargetType="c4f:MessagePrompt">
<Grid VerticalAlignment="Stretch">
<Rectangle Fill="{StaticResource TransparentBrush}" />
<Border VerticalAlignment="Top"
Margin="10"
Background="{TemplateBinding Background}"
BorderThickness="0"
BorderBrush="{StaticResource PhoneForegroundBrush}">
<StackPanel Margin="10">
<TextBlock
Text="{TemplateBinding Title}"
Margin="0,-10,-25,10"
FontSize="30"
TextWrapping="Wrap" FontFamily="Segoe WP Light" />
<ContentPresenter Content="{TemplateBinding Body}" />
<StackPanel
Margin="0,10,0,0"
Name="actionButtonArea"
Orientation="Horizontal"
HorizontalAlignment="Center" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
MessagePrompt prompt = new MessagePrompt();
prompt.Body = new WPUC();
prompt.ActionPopUpButtons.Clear();
prompt.Overlay = new SolidColorBrush(Color.FromArgb(155, 41, 41, 41));
prompt.Template = (ControlTemplate)this.Resources["MsgPropmtNoBorder"];
prompt.Show();
Here's the resultant popup:

I played a bit with the MessagePrompt control, it couldn't found any way to disable or hide the border. It's a shadow kind of effect in MessagePrompt control to provide a popup like appearance.
However, Eventhough you cannot remove it, you can reduce it's effect by setting the Width property of the MessagePrompt equal to your actual blue UserControl ( 300 in this case).

Related

Individual UI element transparency in windows phone

So i was making this app in which I set a background on which there is a grid which has high opacity. I wanted buttons on the grid that had lower opacity than the grid and hence, the background is more visible through the buttons in comparison to the grid. Any idea on how i can do that?
You need to set button control opacity less than grid control opacity.
You can able to set opacity of any control in between 0.1 to 1.
<Grid Background="Red "
Grid.Row="1" >
<Button Background="Green"
Opacity=".2"
Content="Button"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
EDIT:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<Grid
Grid.Row="1" >
<Grid.Background>
<ImageBrush ImageSource="/backgroundImage.jpg">
</ImageBrush>
</Grid.Background>
<Button
Opacity=".4"
Background="#504E4E"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Bottom"
Content="Button"
Foreground="#FFFFFF"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="32,32,231,389"
BorderBrush="{x:Null}"
Height="186"
Width="193"/>
</Grid>
</Grid>
This will surly help you.

Disable interpolation of child elements in Windows RT

Right now I have a ScrollViewer control in a Windows Store Application which surrounds an Image element. I am trying to make a pixel art editor but when the ScrollViewer is zoomed in the Image's contents are interpolated. Is there currently any way to force the image to be scaled in nearest neighbor mode?
EDIT: I decided I should put some code to clarify what I'm trying to do, so here it is:
<ScrollViewer
x:Name="Container"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ZoomMode="Enabled"
MinZoomFactor="0.1"
MaxZoomFactor="100"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Enabled"
VerticalScrollBarVisibility="Auto"
ViewChanged="OnContainerViewChanged">
<Border
x:Name="ImageBorder"
Width="32"
Height="32"
BorderBrush="White"
BorderThickness="4">
<Grid>
<Image
x:Name="RenderedImage"/>
<Image
x:Name="EditPreview"/>
<Canvas
x:Name="GridContainer"
Visibility="Collapsed"/>
<Rectangle
x:Name="InputCapturer"
Fill="Transparent"
PointerPressed="OnPointerPressed"
PointerMoved="OnPointerMoved"
PointerReleased="OnPointerReleased"
PointerExited="OnPointerLeave"/>
</Grid>
</Border>
</ScrollViewer>

How to put a white border to Black ellipse in windows phone 8

I am using the above given popup in my windows phone 8 application. My issue is for the black color list item, it is not possible to differentiate the item from other items. So my question is how i can put a rounded white border to this particular black list item.
Here is the template what i am using in my application.
<DataTemplate x:Key="ColorListTemplate">
<Grid Height="70" Margin="0,0,0,5" toolkit:TiltEffect.IsTiltEnabled="True">
<StackPanel Orientation="Horizontal">
<Ellipse Height="52" Width="52" Fill="{Binding SelectedColor}"/>
<TextBlock Text="{Binding ColorName}" Margin="32,0" FontSize="34" Style="{StaticResource NormalText}"/>
<CheckBox IsChecked="{Binding CheckedStatus}" Style="{StaticResource CheckBoxStyle}" IsHitTestVisible="False"/>
</StackPanel>
</Grid>
</DataTemplate>
Anyone please help me to design my requirement.
You could set a colored Stroke on the Ellipse elements to make it stand out on the black background.
Example:
<Ellipse Height="52" Width="52" Fill="{Binding SelectedColor}" Stroke="White" StrokeThickness="1"/>

Scroll PanoramaItem Header in 'wide' PanoramaItem

I'm interested in creating my own 'Hub' Panorama. I've gotten the 'wide' PanoramaItem working, but I'm trying now to mimic the behavior seen in the Marketplace hub, where the PanoramaItem Header scrolls as you move across the hub.
I'm looking for a way for it to smoothly animate to the end of the hub. Has anyone tried this before, or have any suggestions?
I'd imagine it would be something like this:
//OnPanoramaViewChanged
//get X location of viewport
//animate title to X location
However it doesn't appear that the Panorama has a ScrollViewer attached property.
In case you're curious, here's how I made a wide panorama item.
<controls:PanoramaItem ScrollViewer.HorizontalScrollBarVisibility="Visible" Header="movies" Orientation="Horizontal" Width="900">
<controls:PanoramaItem.HeaderTemplate >
<DataTemplate >
<StackPanel>
<TextBlock Foreground="{StaticResource PanoramaHeaderBrush}" Text="{Binding}">
</TextBlock>
</StackPanel>
</DataTemplate>
</controls:PanoramaItem.HeaderTemplate>
<StackPanel>
<!-- line list with image placeholder and text wrapping -->
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<Grid Background="{StaticResource ControlTitlesInactivePivotBrush}" Width="173" Height="173" >
<TextBlock FontSize="24" Text="Movie Title (2010)" TextWrapping="Wrap" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
<Rectangle Fill="White" Height="48" Width="48" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Test;component/movie_icn.png" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<TextBlock Text="Movie Title:" Margin="12,0,12,0" Foreground="Black" />
<TextBlock Text="The Title" Margin="12,-6,12,0" Foreground="Gray"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</controls:PanoramaItem>
The Silverlight Panorama control doens't support the behaviour you're after or provide the ability to customize it in a way that will let you do it.
If you really want this then you'll need to build your own control from scratch. I would expect this to be more effort than is justified. Just avoid creating a very wide PanoramaItem instead.

Increase touchable target area of a small image?

In a listbox I have a list of titles with an edit icon next to each, how do I increase the touchable area so that even if the user touches part of the title, it actually triggers the image event?
I assume I need to wrap the image in another element but cannot work out what that needs to be.
I tried wrapping the image in a button and add padding to the button but then it pushed the UI elements around, I do not want to affect the presentation, just the none-visible touchable area.
Wrap it in a button - you're totally in the right ball-park. But you need to edit the control template of the button and reduce down all the standard padding and margin, borders etc. so its just a raw touchable region.
You can then wrap anything in this button and apply your template/style to make anything interactive.
Luke
You could try wrapping in a Panel or Grid.
Or just adjust the margin and Z-Order.
Put the image in a button, set the size of the button you want & then set the Stroke property to "No brush" on the button to remove the border.
Try it:
<Border BorderBrush="Transparent"
BorderThickness="20,25,20,0"
Background="Transparent">
<Grid/>
</Border>
or use it in other variations:
<Border Background="Transparent">
<Grid Margin="20 25 20 0"/>
</Border>
full sample with button: (no background interaction when pressed at this sample)
<Button BorderBrush="Transparent"
Tag="{Binding SelectedPhoto.commentsCount}">
<Button.Template>
<ControlTemplate>
<Border BorderThickness="20,25,20,0"
BorderBrush="Transparent"
Background="Transparent">
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Grid Margin="0 0 4 0"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock Text="{TemplateBinding Tag}"
Visibility="{Binding SelectedPhoto.HasComments,Converter={StaticResource BoolToVisibilityConverter}}"
Foreground="{StaticResource BlueColorBrush}"
FontSize="{StaticResource MFontSize36}" />
</Grid>
<Image Source="/Images/photo_comments_icon.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
<Image Source="/Images/photo_comments_icon_blocked.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource OppositeBoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

Resources