As the code below shows, I have a Canvas with a TextBlock inside. Next to it, two textBlocks, their text properties binded to LineOne and LineTwo, ObservableCollection variables. What I want is to create a binding which gives the date and change the color of the Canvas accordingly.
Theoretically, I can bind the date change for the Text property of the DateTextBlock. But I am not sure how to do the color change of the Canvas.
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Canvas Width="100" Height="100" Background="YellowGreen">
<StackPanel>
<TextBlock Name="DateTextBlock" Text="16 May" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Canvas>
<StackPanel Width="311">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
Kindly advise me.
Thanks,
Create a colour property on the view model, and a property changed notifier. Bind the view attribute to the Colour property. In the viewmodel, when the text changes (or whatever it is you want to trigger the colour change), update the Colour property with the appropriate colour making sure to use the public property so that the change event fires.
The Canvas Background property is of type Brush. Therefore, you are either going to have to bind a property of type Brush to Canvas.Background, or you can use a ValueConverter to convert a moel property to a Brush. See the examples on this page:
http://compiledexperience.com/blog/posts/useful-calue-converters
Related
i have a long list selector that contains a check box in each list box item.
the long list selector is binded to a list that contain the name the image and the status
I want to check or uncheck the check box depending on the status of the field.
I have done a lot of search and I am not able to achieve this please help.
XAML :
<phone:LongListSelector x:Name="lstBoxRates" Margin="0,27,-12,0" ItemsSource="{Binding Items}" Height="16776941" SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Width="54" Height="54">
<Image.Source>
<BitmapImage UriSource="{Binding LocalPath}" />
</Image.Source>
</Image>
<TextBlock Text="{Binding name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
<CheckBox x:Name="LBCheckBox" Content="{Binding LineOne}" IsChecked="{Binding IsChecked}" Height="75" Width="412" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
C#:
cView = new CViewModel(AppResources.DBConnectionString);
List<UBCars> ubc = cView.GetAllCars();
lstBoxRates.ItemsSource = ubc;
I tried your code and it works after making these changes:
Removed the ItemsSource binding in xaml. No point in setting it twice
Use properties, not fields, in your model (the UBCars class).
I have created a multiselectlist that included a stackpanel and with images and text that each correspond to a checkbox control. My implementation works correctly, although I cannot get the image and text to align correctly with the checkbox! I was wondering if there was a better way than simply adjusting the margins, but if not how could this be accomplished?
MainPage.xaml
<toolkit:MultiselectList x:Name="connectionTypeMultiSelectList" HorizontalAlignment="Left" VerticalAlignment="Top" Tap="connectionTypeMultiSelectList_Tap">
<toolkit:MultiselectList.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,0,0,0">
<Image Source="{Binding Icon}" Width="35" Height="35" Margin="0"/>
<TextBlock Text="{Binding Name}" Margin="10"/>
</StackPanel>
</DataTemplate>
</toolkit:MultiselectList.ItemTemplate>
</toolkit:MultiselectList>
Try setting the height of the stackpanel and specify the image to fit and text as TextAlign=Center.
Try the following margin values in your design and let me know if it works or not. It worked for dummy data which I created. I hope it works for you too.
<StackPanel Orientation="Horizontal" Margin="12,0,0,0">
<Image Source="{Binding Icon}" Width="35" Height="35" Margin="0,-12,0,0"/>
<TextBlock Text="{Binding Name}" Margin="12,5,0,0"/>
</StackPanel>
I Have a little problem with a ListBox and its elements. As you can see in my code, the stackpanel for both textblocks is set to 250. This is set like this because otherwise the text expands in 1 line and you cannot see the button. As obvious the problem is that setting this parameter as static, if the resolution or the orientation changes wont fit the screen completely. I would like to know if there is a way to set this width dynamically.
<ListBox x:Name="attractionsListbox" Margin="0,0,-12,0" ItemsSource="{Binding Attractions}" Loaded="attractionsListbox_Loaded">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Tag="{Binding Name}" Tap="AttractionListBoxItem_Tap">
<Image Height="140" Width="140" Margin="0,5,0,0" Source="{Binding Thumbnail}" MaxWidth="140" MaxHeight="140" Stretch="Fill" />
<StackPanel Width="250">
<TextBlock x:Name="AttractionName" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}" FontSize="20" Foreground="Black" FontWeight="Bold" />
<TextBlock Text="{Binding ShortDescription}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSmallStyle }" Foreground="Black" />
</StackPanel>
<Button Width="80" Height="80" Padding="10,3,10,5" BorderBrush="Black" Click="Add_Todo_Click" Tag="{Binding Name}">
<Button.Background>
<ImageBrush ImageSource="/SundsvallWP7;component/Images/appbar.add.rest.png"/>
</Button.Background>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
(In android there is weights, where you can assign the weight of each control, don't know if this exists in Windows Phone).
Thank you very much.
A DockPanel may work better for your scenario than a StackPanel. Put the button on the right and the image on the left, then your middle StackPanel content will flow to fill.
http://www.windowsphonegeek.com/articles/Using-DockPanel-in-WP7.
Alternatively, there are only the two orientations and resolution shouldn't be changing. You could just bind the Width to the Orientation with a value converter.
How to make a stacked form such as when editing contact details? I suppose it is a StackPanel, but how about TextBlock/TextBox fonts and margins? Just placing them in StackPanel leaves too much of a gap between them vertically, and text in Blocks is not aligned with Box borders.
Use {StaticResource PhoneTextSubtleStyle} for your labels. It will set the fontsize, the foreground and the margin for 12,0,12,0. TextBoxes' default margin is the same. If your stackpanel in your layout root has the same margin too, the whole form will be "wp7-ish"... :)
Here is an example:
<StackPanel Margin="12,0,12,0"
Grid.Row="1">
<TextBlock Text="{Binding Strings.Settings_Nickname}"
Style="{StaticResource PhoneTextSubtleStyle}" />
<TextBox Text="{Binding Nickname, Mode=TwoWay}"
InputScope="PersonalGivenName"/>
<TextBlock TextWrapping="Wrap"
Text="{Binding Strings.Settings_NicknameInfo}"
Style="{StaticResource PhoneTextNormalStyle}"
Margin="12,0,12,24" />
<TextBlock Text="{Binding Strings.Settings_Language}"
Style="{StaticResource PhoneTextSubtleStyle}" />
<toolkit:ListPicker x:Name="LanguagePicker"
Margin="12,0,12,12" />
<TextBlock TextWrapping="Wrap"
Text="{Binding Strings.Settings_LanguageInfo}"
Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>
As Kylerr mentioned, always use WP7 in-built Styles for formatting the TextBlocks... it will align itself. Also use MetroGridHelper from NuGet, which will help you in aligning the controls.
i created an app to track tweets and binding it to listBox.
and, here is the xaml of the listBox:
<ListBox Margin="0,0,-12,0" x:Name="listBox1" ItemsSource="{Binding Items}" SelectionChanged="listBox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Image Height="100" Width="100" Source="{Binding DeveloperImage}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding DeveloperName}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding DeveloperBirthday}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
but, when it was debugged, it returned into this sequence:
long blank
content
blank
what i want is:
content only, no blanks befor the content and no blanks after the content.
The way a ListBox arranges its Children is determined by its ItemsPanel.
You can replace the default ItemsPanel by setting the ItemsPanelTemplate.
Each Child is then wrapped in an ItemContainer.
You can replace the default ItemContainer by setting the ItemContainerStyle.
Finally, the ListBox itself has a border, padding and margin that influence where the ItemsPanel is placed.
So if you want to adjust the placement of the content of the listbox you will first have to find out what template(s) should be modified. A quick way is to use Blend because it will give you visual feedback.