I want to use a WriteableBitmap to render a programmatically instantiated UserControl to a jpg/png image to use it as a live tile background image in a Windows Phone 7.1 project, but DataBinding is not working as expected when rendering the control.
In general, the UserControl is something like this:
<UserControl>
<Grid x:Name="LayoutRoot" Height="173" Width="173" >
<Grid.Background >
<SolidColorBrush Color="{StaticResource PhoneAccentColor}" />
</Grid.Background >
<Grid.RowDefinitions>
<RowDefinition Height="27"/>
<RowDefinition Height="146"/>
</Grid.RowDefinitions >
<ItemsControl Grid.Row="1" Margin="10,0,0,0" ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding MyBindingProperty, FallbackValue=xxx}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="Hello World" FontSize="22" Margin="5,0,0,0"/>
<TextBlock TextWrapping="Wrap" Text="{Binding Count, FallbackValue=-1}" FontSize="18.667" Margin="123,0,0,0"/>
</Grid>
</UserControl>
When I now put this control onto a PhoneApplicationPage and assign a list with items of my data structure to the DataContext property of the UserControl, everything works fine and I see one TextBlock for each list item and the Text property of that TextBlock is correctly displaying the value of the property of my data structure. Also the last TextBlock on the Grid displays correctly the current count of list items.
BUT when I'm now trying to programmatically create that UserControl, assign the same list to the DataContext and then use a WriteableBitmap to render it to an image file, it seems that all DataBindings within the DataTemplate of the ItemsControl aren't working anymore, they're displaying the FallbackValue now. Although the DataBinding of the outer TextBlock in the Grid is still working perfectly and also I got the correct number of TextBlocks in the StackPanel (= items in the bound list).
Here is my code for creating the the WriteableBitmap:
var tile = new MyTileControl { DataContext = this._myList };
tile.Arrange(new Rect(0, 0, 173, 173));
tile.Measure(new Size(173, 173));
var bmp = new WriteableBitmap(173, 173);
bmp.Render(tile, null);
bmp.Invalidate();
What's the problem with the DataBindings in the DataTemplate when rendering through a WriteableBitmap and how can I solve it?
I think, that your control not fully created yet, and you can't grab bitmap just after creation. Try to use Dispatcher.BeginInvoke or something else for delayed grabbing of image.
Also, add this control to your page and look where is a problem - in control creation or in bitmap? This give you more information about a problem.
Related
What can I do in the following situation?
I have a simple page. In code behind I add PhoneTextBox control for some filtering of a data. But sometimes (frequently) when I try to write something, I see, that text inside is transparent or collapsed or something else, so I don't see it. I don't see it even when I select this text.
// Generating of a PhoneTextBox
SearchBox = new Microsoft.Phone.Controls.PhoneTextBox();
SearchBox.DataContext = searchBoxContext;
SearchBox.Name = string.Format("SearchBox_{0}", Guid.NewGuid());
SearchBox.Visibility = Visibility.Collapsed;
// Adding Phone text box in a Grid on the Page
RowDefinition rd = new RowDefinition();
rd.Height = GridLength.Auto;
PageDynamicGrid.RowDefinitions.Insert(0, rd);
Grid.SetRow(generator.SearchBox, 0);
foreach (FrameworkElement child in PageDynamicGrid.Children)
{
Grid.SetRow(child, Grid.GetRow(child) + 1);
}
SearchBoxContext = (generator.SearchBox.DataContext as SearchButtonModel);
SearchBoxContext.SearchTextChanged += SearchBoxContext_SearchTextChanged;
generator.SearchBox.TextChanged += SearchBox_TextChanged;
generator.SearchBox.LostFocus += SearchBox_LostFocus;
generator.SearchBox.KeyUp += SearchBox_KeyUp;
generator.SearchBox.DataContext = null;
PageDynamicGrid.Children.Add(generator.SearchBox);
PageDynamicGrid.UpdateLayout();
and page.xaml
<Grid x:Name="PageDynamicGrid" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="{Binding Title}"
Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>
<ListBox Grid.Row="1" Margin="12,0"
ItemsSource="{Binding PageDynamicContent, Mode=OneWay}"/>
</Grid>
Almost all content of this page (including search box) creates dynamically, but other content is some buttons and links and I need to filter it, if I have search box. Filter works, but users don't like collapsed text in search box. So it looks like that (and there is not a whitespaces in front of the marker)
So, i don't know why, but it seemed that problem is in the order of actions:
First of all create element, change grid column and row definitions
and add element in the grid.
Update layout of the grid.
And only after all this actions we can collapse PhoneTextBox.
it works for me.
I finally was able to create an "easy" transparent button control, based off a ContentControl. However, can someone explain why I couldn't click/tap any blank areas of the control until I set the background of the child element to transparent? I ran into this issue also when:
I tried to use Border
I set the ControlTemplate of a button rather than the ContentTemplate.
Here's my "button" class:
public class TransparentButton : ContentControl {
public TransparentButton() {
HorizontalContentAlignment = HorizontalAlignment.Stretch;
}
public override void OnApplyTemplate() {
var child = Content as Grid;
if (child != null) {
child.Background = new SolidColorBrush(Colors.Transparent);
}
base.OnApplyTemplate();
}
}
It's pretty specific to my cases when using (assuming a Grid child) but it works. The reason I use it is for lists (non-ListBox) with the TiltEffect enabled.
Context of the issue:
<ItemsControl x:Name="Items" toolkit:TiltEffect.IsTiltEnabled="True">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:TransparentButton
cal:Message.Attach="[Event Tap] = [Action Go($dataContext)]">
<Grid>
<StackPanel HorizontalAlignment="Left">
<TextBlock Text="{Binding Test}" />
</StackPanel>
<StackPanel HorizontalAlignment="Right">
<TextBlock Text="{Binding Test2}" />
</StackPanel>
</Grid>
</controls:TransparentButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If you click between the StackPanels inside the item, no event gets fired and nothing happens. Only when the Grid's Background is Transparent does it "take up space".
I come from a web background so this is confusing; a containing element should be "hit testable" even when it's background isn't set.
An object with no background is usually called as hollow or non-hittable in XAML terms. So it is must to set a background to make the object respond to hits. To achieve hit test for an transparent object, you should set the background to transparent.
More information about hit testing
http://msdn.microsoft.com/en-us/library/ms752097.aspx
I have a Map control showing a few Pushpins. I do not want the user to navigate in the map so I disable it. But I do want the user to be able to tap on a Pushpin (and in the event I navigate to a detail page).
However when the Map.IsEnabled is false, the Pushpins don't seem to receive any gestures either. I've also tried using IsHitTestVisible, but with no luck.
Some code showing what I'm trying to do. Does anyone have any ideas?
<maps:Map Name="Map"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Collapsed" ZoomBarVisibility="Collapsed"
IsEnabled="False">
<maps:MapItemsControl ItemsSource="{Binding TheCollection}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Name="Pin" Location="{Binding Coordinate}" Content="{Binding Ix}">
<maps:Pushpin.Background>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</maps:Pushpin.Background>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="PinTap" />
</toolkit:GestureService.GestureListener>
</maps:Pushpin>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:Map>
Setting IsEnabled to false prevents the Map control from responding to user input, which affects the child Pushpin as you've seen. If you want the map to be read-only but the Pushpin to respond to gestures then I think you have two options:
Handle all the gesture events on the Map control and set e.Handled to true, which will prevent the Map itself from processing the event, but should leave the PushPin free to handle the tap gesture.
Create a WriteableBitmap of the Map and show that instead, and then display the Pushpin on top (NOTE: I suspect that the Pushpin control won't work outside of the Map control, so you'd need to create/re-template a control to look like a Pushpin).
UPDATE: The events that you need to handle on the Map to make it appear "read-only" but remain enabled are MapPan and MapZoom.
So here's how I solved it after a lot of testing and browsing MSDN. It turns out that things are a bit different in the Map control on Windows Phone (see MSDN). There are new behaviors and events compared to normal Silverlight.
<maps:Map Name="Map"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Collapsed" ZoomBarVisibility="Collapsed"
MapZoom="Map_MapZoom" MapPan="Map_MapPan">
<maps:MapItemsControl ItemsSource="{Binding TheCollection}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Name="Pin" Location="{Binding Coordinate}" Content="{Binding Ix}">
<maps:Pushpin.Background>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</maps:Pushpin.Background>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="PinTap" />
</toolkit:GestureService.GestureListener>
</maps:Pushpin>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:Map>
...
private void Map_MapPan(object sender, MapDragEventArgs e)
{
e.Handled = true;
}
private void Map_MapZoom(object sender, MapZoomEventArgs e)
{
e.Handled = true;
}
I'm developing a Windows Phone 7 app, and I have two xaml pages. From the first one, I embed two app bar links to select an image from gallery or capture an image using the camera. I would like the image chosen on the first page to be displayed on a second page, with the app bar buttons showing a confirm yes or no. As of now, I have an image control on the first page (barcodeImage) that gets updated with the choice.
MainPage.xaml
<controls:PanoramaItem Header="welcome">
<ScrollViewer Name="sv1" VerticalScrollBarVisibility="Auto">
<StackPanel Height="1100">
<TextBlock TextWrapping="Wrap">Random text here.
</TextBlock>
<Grid x:Name="Grid2" Grid.Row="1" Margin="12,0,12,0">
<Image Height="150" Margin="28,30,168,0" Name="barcodeImage" Stretch="Fill" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment" />
</Grid>
</StackPanel>
</ScrollViewer>
</controls:PanoramaItem>
MainPage.xaml.cs
void cameraCaptureTask_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(e.ChosenPhoto);
barcodeImage.Source = bmp;
}
}
Confirm.xaml
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Margin="64,36,57,100" x:Name="barcodeImageFinal" Stretch="Fill" />
</Grid>
I'd like barcodeImageFinal to display the final bitmap. How can I make this work? Thanks for looking :)
As I understand your question, you want to create a bitmap in a member of MainPage and then access it from Confirm. One approach would be to create a public static property of some class for your bitmap. For example, maybe create public static BitmapImage FinalBitmap in your App. Then you could set the value of the property in your cameraCaptureTask_Completed and then create a Loaded handler in your Confirm class that sets image source to the stored bitmap.
I think the answer to your question title is yes if you make the member static, although the other class isn't really "external". A normal class member won't be accessible because you don't have an instance of that class.
I'm having an issue when I try to pass the selectedIndex of my list from my "List" screen.
On my List screen I have the following binding:
Code Behind:
lbPrograms.ItemsSource = App.ViewModel.Items;
XAML:
<ListBox x:Name="lbPrograms" ItemsSource="{Binding Items}" SelectionChanged="lbPrograms_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
<Image x:Name="ItemImage" Source="/images/ArrowImg.png" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
<StackPanel>
<TextBlock x:Name="ItemText" Text="{Binding programName}" Margin="-2,-13,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock x:Name="DetailsText" Text="{Binding createDate}" Margin="0,-6,0,3" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock x:Name="programId" Text="{Binding programId}" Margin="0,-6,0,3" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<!--<Image x:Name="ItemFavs" Source="/images/favs.png" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
<Image x:Name="ItemDelete" Source="/images/delete.png" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>-->
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In my detail screen I look up using the selectedIndex value:
App.ViewModel.Refresh();
DataContext = App.ViewModel.Items[index].nValDictionary;
However, since I can't figure out how to just update a value in my iEnumerable collection I have been removingAt[index] and then re-adding to the collection.
So can anyone tell me, how do use update an existing element in my collection? If not, can I pass the programId (that is in my binding) instead of the selectedIndex as the indexes are getting all messed up after the Delete/Add functionality.
Please Advise.
UPDATE:
After speaking in several forums I should clear up that I am implement INotifyChanged Event on my properties in my object.
Basically the following snippet of code is my current issue:
private void FavBtn_Click(object sender, EventArgs e)
{
foreach (var item in App.ViewModel.Items)
{
if ((item.currentProgram == true) && (item.programId != index))
{
item.currentProgram = false;
}
if (item.programId == index)
{
item.currentProgram = true;
}
}
When I run this everything looks to be ok.
However, when I navigate to another page, I re-load the object and the changes are lost. It is almost like I need to save them before navigating, however, if I do a item.Save(); I get duplicates in my list.
I'm guessing you haven't implemented INotifyPropertyChanged on your Items class yet.
Implementing this will allow updates made in these objects to be updated through your data bindings.
Here's a walkthrough on how to implement INotifyPropertyChanged.
How to: Implement the INotifyPropertyChanged Interface
Is App.ViewModel.Items of type ObservableCollection<T>?
If so, when you modify a property of one of the collection items and raise a property change event (via INotifyPropertyChanged) indicating the collection property that your ListBox.ItemsSource is bound to, the DataTemplate bindings will do the rest.