I'm making a chat client for WP7 in which you can share photos.
We have a setup where a message appears in a little chat box with user's nickname, a StackPanel for an image (if a URL string is provided along with the message), and a StackPanel for the message text.
It'd be great if a user could tap directly on the image to see a larger version. However, I can't get any events to fire.
I've used the approach of changing a button's template to be just an image before (not in a data template though) and it's worked fine. But this DataTemplate (separate file from the full view) is not working.
How can I accomplish this? Is this doable in a ListBox, or am I stuck to the awkward Twitter style of having to select the whole message, then look at a full view of the image?
EDIT
I tried the GestureListener approach, but ran into a problem where it couldn't parse the event handler name and would just throw an exception when I ran the app.
My data templates are in separate XAML files. I assumed there wouldn't be any difference in defining each template in the same file as the PhoneApplicationPage. Is that correct?
<DataTemplate x:Name="LeftMessageTemplate">
<Grid Margin="0,0,0,17" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="3" BorderBrush="{StaticResource ChatPivotSubBrush}" Margin="0, 3, 9, 0" VerticalAlignment="Top">
<Image Source="{Binding AvatarURL}" Height="60" Width="60" VerticalAlignment="Top"/>
</Border>
<Grid Grid.Column="1" Width="372" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" HorizontalAlignment="Right" Orientation="Horizontal" Background="Transparent">
<Image Source="/my_chatclient;component/Images/chattheirspointercroppedwp7.png" VerticalAlignment="Top" Margin="0, 28, 0, 0" Height="19" Width="13"/>
<StackPanel Background="{StaticResource ChatPivotMainBrush}" Width="Auto" HorizontalAlignment="Left" MinHeight="66" VerticalAlignment="Top" Margin="0, 3, 0, 0" Orientation="Horizontal">
<StackPanel Margin="4, 4, 4, 4">
<Button>
<Button.Template>
<ControlTemplate>
<Image Source="{Binding PictureURLPreview}" VerticalAlignment="Top" MaxWidth="200"/>
</ControlTemplate>
</Button.Template>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ViewPictureCommand, Mode=OneWay}" />
</i:EventTrigger>
</Button>
</StackPanel>
<StackPanel MaxWidth="340" Orientation="Vertical" Margin="12,12,12,12">
<TextBlock FontWeight="Bold" Foreground="{StaticResource ChatDarkerBlueBrush}" Text="{Binding CreatorNicknameLabel}" TextWrapping="NoWrap" Margin="0, 0, 0, 0" FontSize="18" />
<TextBlock MaxWidth="316" Foreground="{StaticResource ChatDarkerBlueBrush}" Text="{Binding Text}" TextWrapping="Wrap" Margin="0,0,0,0" FontSize="16" />
<TextBlock Foreground="{StaticResource ChatDarkerBlueBrush}" FontWeight="Light" Text="{Binding CreatedAtLabel}" TextWrapping="Wrap" Margin="0, 0,0 ,0" FontSize="14" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
If I understood it correct, here is a way to accomplish it. Add the image to a button with an event handler. Something like:
<StackPanel Grid.Column="0" HorizontalAlignment="Right" Orientation="Horizontal" Background="Transparent">
<Button Click="ShowLarger" BorderThickness="0">
<Image Source="/my_chatclient;component/Images/chattheirspointercroppedwp7.png" VerticalAlignment="Top" Margin="0, 28, 0, 0" Height="19" Width="13"/>
</Button>
<StackPanel Background="{StaticResource ChatPivotMainBrush}" Width="Auto" HorizontalAlignment="Left" MinHeight="66" VerticalAlignment="Top" Margin="0, 3, 0, 0" Orientation="Horizontal">
<StackPanel Margin="4, 4, 4, 4">
<Button>
<Button.Template>
While there's not a awful lot of information here, I would recommend you bind a event to the Image itself, rather than using a Button's ContentTemplate for it.
With the Silverlight Toolkit you can simply use their geatureservice, like this:
<Image Source="{Binding PictureURLPreview}" VerticalAlignment="Top" MaxWidth="200">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener>
<i:EventTrigger EventName="Tap">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ViewPictureCommand, Mode=OneWay}" />
</i:EventTrigger>
</toolkit>
</toolkit:GestureService.GestureListener>
</Image>
Use the Tap-event:
<Image Tap="doYourThing ... />
Related
I have a simple horizontal ListView where it will show trending anime. It is a horizontal ListView. But as in this image, in the One-Piece anime, the hover is present. but due to screenshot, the hover is hidden. when the hovered ListViewItem is focused, it is showing some extra sapces on both sides of the main element, How do I rectify it??
Any Ideas...
My ListView is below:
<ListView ScrollViewer.IsHorizontalRailEnabled="True"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.IsVerticalRailEnabled="False"
SelectionMode="None"
IsSwipeEnabled="False"
IsItemClickEnabled="True"
x:Name="AnimeTrendingList"
ItemClick="AnimeTrendingList_ItemClick"
UseSystemFocusVisuals="False">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate x:DataType="data:MediaElement">
<Grid
Width="150"
Height="300"
CornerRadius="10">
<Grid.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem
x:Name="AnimeSaveImage"
Text="Save Image"
Click="AnimeSaveImage_Click"
Tag="{x:Bind CoverImage.ExtraLarge.AbsoluteUri}"/>
<MenuFlyoutItem
x:Name="AnilistUrlCopy"
Text="Copy AniList URL"
Click="AnilistUrlCopy_Click"
Tag="{x:Bind SiteUrl.ToString()}"/>
<MenuFlyoutItem
x:Name="AnilistOpenUrl"
Text="Open in Browser"
Click="AnilistOpenUrl_Click"
Tag="{x:Bind SiteUrl.ToString()}"/>
<MenuFlyoutItem
x:Name="EmbedableBannerSave"
Text="Save Embeddable Image"
Click="EmbedableBannerSave_Click"
Tag="{x:Bind Id.ToString()}"/>
</MenuFlyout>
</Grid.ContextFlyout>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Width="150">
<Image Stretch="UniformToFill">
<Image.Source>
<BitmapImage UriSource="{x:Bind CoverImage.Large.AbsoluteUri}"/>
</Image.Source>
</Image>
<!--<Canvas ToolTipService.ToolTip="Currently Airing">
<Rectangle Canvas.Top="5"
Canvas.Left="5"
Width="25"
Height="25"
Fill="{StaticResource CustomAcrylicInAppLuminosity}"/>
<Ellipse Width="15"
Height="15"
Canvas.Left="10"
Canvas.Top="10"
Fill="LightGreen"/>
</Canvas>-->
</Grid>
<StackPanel
Width="150"
Background="{ThemeResource SystemAltLowColor}"
Grid.Row="1"
BorderThickness="1"
Canvas.ZIndex="2">
<TextBlock Text="{x:Bind Title.UserPreferred}"
TextTrimming="CharacterEllipsis"
FontSize="15"
FontWeight="Bold"
Margin="5, 15, 5, 2"
ToolTipService.ToolTip="{x:Bind Title.UserPreferred}"/>
<TextBlock Text="{x:Bind Studios.Nodes[0].Name}"
FontStyle="Italic"
FontSize="12"
Margin="5, 0, 5, 5"
Foreground="{ThemeResource SystemBaseMediumHighColor}"/>
<TextBlock Text="{x:Bind sys:String.Format(x:Null, '{0} • {1} Episodes', Format, Episodes)}"
FontSize="12"
Margin="5, 2, 5, 5"/>
<Grid Margin="5, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0"
Orientation="Horizontal"
Margin="5">
<FontIcon Glyph=""
FontSize="12"
Foreground="Yellow"/>
<TextBlock Text="{x:Bind Trending.ToString()}"
FontSize="12"
Margin="5, 0, 0, 0"
VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Grid.Column="1"
Orientation="Horizontal"
Margin="5"
HorizontalAlignment="Left">
<FontIcon Glyph=""
FontSize="12"
Foreground="Red"/>
<TextBlock Text="{x:Bind Favourites.ToString()}"
FontSize="12"
Margin="5, 0, 0, 0"
VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Hover Focus exceeding the ListViewItem width in UWP C#
It looks the default ListViewItem background, and it will highlight when point over or point pressed. you could set them as Transparent to disable this behavior. please refer to the following code taht place in the app resource dictionary.
<Application.Resources>
<SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Transparent" />
<SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Transparent" />
</Application.Resources>
I have a Binding page for some bugs and another one for comments in my app. The first one work properly, but the second one don't show anything but the data(21 comments) load successfully.
I've been taking a look to the live Live Property Explorer and the first Grid have those options:
However, the second one have the ItemsSource set as null:
This should not be possible, because those items have the same code just with few changes to make them load different.
Here you have the code:
<Page.Resources>
<DataTemplate x:DataType="data:Book" x:Key="BookDataTemplate">
<StackPanel HorizontalAlignment="Center">
<Image Width="150" Height="150" Source="{x:Bind CoverImage}" />
<StackPanel HorizontalAlignment="center" Orientation="Horizontal">
<TextBlock FontSize="10" Text="{x:Bind DScore}" HorizontalAlignment="Center" Foreground="#FF21C721" />
<TextBlock FontSize="10" Text="{x:Bind DFav}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
</StackPanel>
<TextBlock FontSize="16" Text="{x:Bind Title}" HorizontalAlignment="Center" Foreground="White" />
<TextBlock FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
<ToolTipService.ToolTip>
<TextBlock Text="{x:Bind DData}"/>
</ToolTipService.ToolTip>
</StackPanel>
</DataTemplate>
</Page.Resources>
<GridView ItemsSource="{x:Bind Books}" AllowDrop="True" IsSwipeEnabled="True" IsItemClickEnabled="True" ItemClick="Content_ItemClick" Name="Content" Margin="0,100,0,40" CanReorderItems="True"
CanDragItems="True"
ItemTemplate="{StaticResource BookDataTemplate}" ReorderMode="Enabled"/>
And the Comments gridview:
<Page.Resources>
<DataTemplate x:DataType="data:Comment" x:Key="CommentDataTemplate">
<StackPanel HorizontalAlignment="Center">
<Grid>
<Rectangle Margin="50, 0, 0, 30" Fill="#FF144772" Height="100" Stroke="Black" Width="500" HorizontalAlignment="Center"/>
<Rectangle Margin="60, 0, 0, 45" Fill="#FF031131" Height="60" Stroke="Black" Width="60" HorizontalAlignment="Left"/>
<Rectangle Margin="140, 0, 0, 25" Fill="#FF103F91" Height="60" Stroke="Black" Width="360" HorizontalAlignment="Left"/>
<Image x:Name="image" HorizontalAlignment="Left" Height="50" Margin="65,18,0,0" VerticalAlignment="Top" Width="50" Source="Assets/profile.png"/>
<StackPanel HorizontalAlignment="center" Orientation="Horizontal">
<TextBlock Margin="0, 70, 400, 0" FontSize="10" Text="{x:Bind Date}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
</StackPanel>
<TextBlock Margin="130, 0, 0, 0" FontSize="16" Text="{x:Bind Author}" HorizontalAlignment="Left" Foreground="White" />
<TextBlock Margin="150, 30, 0, 0" FontSize="11" Text="{x:Bind Body}" Width="360" HorizontalAlignment="Left" Foreground="#FF9C9C9C" />
<ToolTipService.ToolTip>
<TextBlock Text="{x:Bind Score}"/>
</ToolTipService.ToolTip>
</Grid>
</StackPanel>
</DataTemplate>
</Page.Resources>
<GridView ItemsSource="{x:Bind Comments}" AllowDrop="True" IsSwipeEnabled="True" IsItemClickEnabled="True" Name="Content" Margin="0,100,0,40" CanReorderItems="True"
CanDragItems="True"
ItemTemplate="{StaticResource CommentDataTemplate}" ReorderMode="Enabled"/>
Can somebody help me identify the problem here please?
In the XAML file of your 2nd page go to "Comments" in ItemsSource and press F12. If you could navigate to definition of Comments means your binding is successful but Comments is not getting populated. If you could not navigate to definition means binding is not working. In that case check if datacontext has been set for that page. Also check how "Comments" is spelled in XAML and in the property.
Hello I have this xaml
<dxui:PageAdornerControl Header="Details" DataContext="{Binding SelectedItem}">
<dxui:PageAdornerControl.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1" >
<dxui:NavigationButton FontSize="14" Margin="10, 0, 0, 0" Content="Customers" NavigateTo="CustomersPage"/>
<dxui:NavigationButton FontSize="14" Margin="10, 0, 0, 0" Content="Categorys" NavigateTo="CategorysPage"/>
<dxui:NavigationButton FontSize="14" Margin="10, 0, 0, 0" Content="Products" NavigateTo="GroupedItemsPage" NavigationParameter="{Binding Title}"/>
</StackPanel>
</Grid>
</DataTemplate>
</dxui:PageAdornerControl.HeaderTemplate>
<dxlc:LayoutControl Padding="40, 10, 40, 10" ItemSpace="20">
<dxlc:LayoutGroup Orientation="Vertical" ItemSpace="10" VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBlock Text="{Binding Title}" FontSize="20" IsHyphenationEnabled="True"/>
<TextBlock Text="{Binding Subtitle}" FontSize="16"/>
<Image Source="{Binding Image}"/>
</dxlc:LayoutGroup>
<dxlc:LayoutGroup Orientation="Vertical">
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" FontSize="16" Margin="0,70,0,0" Height="20"/>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" FontSize="16" Margin="0,0,0,0"/>
</dxlc:LayoutGroup>
</dxlc:LayoutControl>
</dxui:PageAdornerControl>
The Bindings work fine with the TextBloks and Images but when i try to bind the Title to NavigationParameter it doesnt work and sends null parameter.
The cause of issue is that you've set the PageAdornerControl.Header property. This value is forwarded to the PageAdornerControl.HeaderTemplate and further to NavigationButtons DataContext. That's why your binding doesn't work.
You can clear the Header property (it is not actually used in your HeaderTemplate) or bind it to the SelectedItem property. As an alternative, you can use the RelativeSource binding:
NavigationParameter="{Binding Path=DataContext.SelectedItem.Title, RelativeSource={RelativeSource AncestorType={x:Type dxui:PageAdornerControl}}}
Why when I put the phone in Landscape position, LongListSelectornão resizes?
Following image:
Following my XAML:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<phone:LongListSelector Name="lstConsPais"
HorizontalAlignment="Left"
VerticalAlignment="Top"
LayoutMode="List"
IsGroupingEnabled="False"
Width="456" SelectionChanged="lstConsPais_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#111" Margin="0, 10, 0, 0" BorderThickness="0,0,0,2">
<StackPanel VerticalAlignment="Center" Orientation="Horizontal">
<Image Height="100" Width="100" Source="{Binding NomeImgBandeira}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding NomePais}" Style="{StaticResource PhoneTextGroupHeaderStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,25,0,0" />
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
I wanted him to fill the entire screen.
more or less like this:
but I do not want to tamper with the "width", I want "automatic"
I'm working on a control for my WPF application in which I want a Button inside of a TextBox. The Button will contain an image that changes with a mouseover, but I already know how to do that part. What I'm having trouble with is actually including the Button in the TextBox so that it only takes up as much space as the image and is transparent. Below is the markup that I've tried so far:
XAML:
<Grid>
<TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" Margin="5, 5, 10, 5" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
<Button Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<Button.Content>
<Image Source="Image.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button.Content>
</Button>
</Grid>
I've followed along with this question: How to implement a textbox with a clear button in wpf?, which also linked to this article: WPF Search Text Box. The XAML suggested in the question didn't work, which I think is because of the Style they use, which I don't have access to. The article provided too much information, mostly talking about the triggers and dependency properties needed in order to swap out searching and deleting icons on mouseovers. So, I'm asking for help finding a simple solution on how to make this happen. Thank you!
EDIT: I've followed the advice of the answers, and I'm able to style the button correctly, but it won't show up in the textbox still, and if it does, the text still runs underneath it. I've included the XAML and a picture of what's happening:
XAML:
<Grid Margin="5, 5, 10, 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
<Button Background="{Binding Backgound, ElementName=SearchBoxView}" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Click="SearchBoxViewButtonClick" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Image.png" Width="12" Height="12"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
Image:
Specify Button template, instead of content
<Button>
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
EDIT
BTW, in your case the image will cover TextBox and entered text. I would recommend to put this controls in the different columns of the grid like bellow
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchBoxView"
HorizontalAlignment="Right"
Width="200" Margin="5, 5, 10, 5"
FontSize="16"
KeyUp="SearchBoxKeyDown"
Text="{Binding SearchText, Mode=TwoWay}"
Grid.Column="0"/>
<Button
Grid.Column="1"
Background="Transparent"
HorizontalAlignment="Right"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>