I have a MediaElement inside ListBox.How I can get access to "audiop_Copy" by buttons "play/pause"?
<local:TypeTemplateSelector.WithAudio>
<DataTemplate>
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock ... />
<StackPanel Height="50" Orientation="Horizontal" Margin="5,0,4,0" MinHeight="50">
</TextBlock>
<Button Click="PlayMedia" Content="Play" />
<Button Click="PauseMedia" Content="Pause" />
</StackPanel>
<MediaElement Name="audiop_Copy" Source="{Binding audioUri}" Stretch="None" HorizontalAlignment="Left" AutoPlay="False"/>
</StackPanel>
</Grid>
</DataTemplate>
</local:TypeTemplateSelector.WithAudio>
2 ways to do it from the spot (possibly there are more). You will need a pointer to your Button that was clicked anyway:
[difficult, inflexible, fragile] In button Click event handler use VisualTreeHelper class to navigate Visual Tree and find the element. Use sender as starting point
[better solution] use Tag property and binding.
<Button Click="PauseMedia" Content="Pause" Tag={Binding ElementName=audiop_Copy} />
And in handler something like that:
private void PauseMedia(object sender, RoutedEventArgs e)
{
var me = ((FrameworkElement) sender).Tag as MediaElement;
}
Related
I have several pages that include the same border and its child elements.
Each page has
<Border Grid.Column="1" Style="{StaticResource InstructionBox}" x:name="staticBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Style="{StaticResource OnlyContentStyle}" Grid.Row="0" Grid.Column="0"
Click="Instruction_Click">
<Border >
<TextBlock Style="{StaticResource InstructionStyle}">
</TextBlock>
</Border>
</Button>
<Button Style="{StaticResource OnlyContentStyle}" Grid.Row="0" Grid.Column="1"
Click="Logs_Click">
<Border >
<TextBlock Style="{StaticResource LogStyle}">
</TextBlock>
</Border>
</Button>
<Border Grid.Row="2" Grid.ColumnSpan="2" x:Name="InstructionBorder">
<StackPanel x:Name="PanelInstructions" Style="{StaticResource InstructionTextStyle}">
</StackPanel>
</Border>
</Grid>
</Border>
Is there a way to make reference this border throughout all my pages?
Thanks
No, there is no direct way. XAML only allows an element to exist in a single location on the Visual Tree. To do this you need to convert your border into a user control. There are several ways to do this. In the example below, I've used dependency properties to provide variable content for the first button in the user control's code behind. For the click event, I recommend binding the buttons Command to an ICommand implementation, but you need to be doing MVVM for that. This sample adds a RoutedEventHandler instead.
public static readonly DependencyProperty InstructionButtonContentProperty = DependencyProperty.Register(
"InstructionButtonContent", typeof(FrameworkElement), typeof(InstructionBoxControl), new PropertyMetadata(default(FrameworkElement)));
public FrameworkElement InstructionButtonContent
{
get { return (FrameworkElement) GetValue(InstructionButtonContentProperty); }
set { SetValue(InstructionButtonContentProperty, value); }
}
public event RoutedEventHandler InstructionButtonClicked;
public InstructionBoxControl()
{
InitializeComponent();
}
private void InstructionButtonClick(object sender, RoutedEventArgs e)
{
InstructionButtonClicked?.Invoke(sender, e);
}
For the most part you can paste the border into the user control's XAML. Then you need to bind the dynamic parts to the user control's DependencyProperties. You also hook up the button's click event call the RoutedEventHandler in the code behind above.
<Border >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0"
Grid.Column="0"
Click="InstructionButtonClick">
<Border>
<ContentPresenter Content="{Binding Path=InstructionButtonContent, RelativeSource={RelativeSource AncestorType={x:Type local:InstructionBoxControl}}}"/>
</Border>
</Button>
You can then use the new UserControl inplace of the border on any page like so:
<local:InstructionBoxControl InstructionButtonClicked="InstructionBoxControl_OnInstructionButtonClicked">
<local:InstructionBoxControl.InstructionButtonContent>
<TextBlock>Instructions</TextBlock>
</local:InstructionBoxControl.InstructionButtonContent>
</local:InstructionBoxControl>
The other button and satckpanel should work similarly.
I have a <Checkbox/> in my <GridView.ItemTemplate>. How do I handle the <Checkbox/> as to the element in which it is?
For example, I want to delete item when checkbox checked.
I think should write here. But what?
private void CheckBox_Checked_1(object sender, RoutedEventArgs e)
{
}
Here's My XAML:
<GridView Margin="0,10,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
x:Name="GridColections"
IsItemClickEnabled="True"
SelectionMode="None"
ItemsSource="{x:Bind DS.AllRem, Mode=OneWay}"
ItemClick="GridColections_ItemClick" >
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:GetRem" >
<Grid Margin="-2,0,-6,0" BorderBrush="LightGray" BorderThickness="1" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock TextTrimming="CharacterEllipsis" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{x:Bind ReminderName}" Margin="5,5,0,0" FontSize="20"/>
<TextBlock TextTrimming="CharacterEllipsis" Grid.Column="0" Grid.Row="1" Width="600" TextWrapping="Wrap" Text="{x:Bind ReminderDescription}" Margin="5,5,0,0" FontSize="12"/>
<CheckBox Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Center" Checked="CheckBox_Checked_1"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
The problem is that you almost certainly want to be able to use the DataContext in your click handler but you won't get that easily by just having a reference to the CheckBox which will be the sender argument in your callback. Normally what you would do here is create a Command on your item's view model and bind to that and any additional information that you would want to pass in you would pass in through the CheckBox's CommandParameter.
Once you do this you are now operating in your view model with a reference to whatever piece of information that you need through the command parameter (for instance you could set CommandParameter = "{Binding}" to pick up the entire data context which would be the item's view model and that would be accessible from your Command as an argument to it). You should be able to solve your issue this way.
I got my DataTemplate for items and within this DataTemplate I have such code:
<Button x:Name="DoneButton"
Style="{StaticResource ButtonStyle1}"
BorderThickness="1"
Margin="0,0,20,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Grid.Column="2"
Grid.Row="1"
Width="50"
Height="50"
>
<Image Source="Images/WPIcons/checked.png" Width="30" Height="30" Margin="-10,0,-10,0" />
<Button.Flyout>
<Flyout x:Name="myFly">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Uid="myNote" Text="Note: " Style="{StaticResource myText}" />
<TextBox Grid.Row="1" TextWrapping="Wrap" AcceptsReturn="True" Height="40" x:Name="note" Text="{Binding RecentNote, Mode=TwoWay}" Style="{StaticResource TextBoxStyle1}"/>
<Button x:Name="CompletedButton"
Command="{Binding CompletedCommand}"
CommandParameter="{Binding}"
Style="{StaticResource ButtonStyle1}"
BorderThickness="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Grid.Row="2"
Click="CompletedButton_Click"
Content="Done"
MinWidth="80"
Height="40"
/>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
After the flyout for the item has been called and user put his data in it I want to hide this flyout as soon as user hits the "Done" button (x:Name="CompletedButton").
I tried to do that in code behind like:
private void CompletedButton_Click(object sender, RoutedEventArgs e)
{
Button button = (Button)sender;
Grid grid = (Grid)VisualTreeHelper.GetParent(button);
Flyout fly = (Flyout)VisualTreeHelper.GetParent(grid);
fly.Hide();
}
But I get cast exception with that I can't cast ContentPresenter to Flyout so I guess it's not the way I look for.
How I can hide this flyout?
I resolved it with creating global DependencyObject on the page. So when you click the button it keeps it and I can call its flyout to hide() from button within this flyout. A bit ugly but works like a charm.
I have the following XAML code..
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="DataTemplate1" >
<Border BorderBrush="LightGray" BorderThickness="1" Height="150" Width="500" >
<Grid Width="500" Height="150" Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Height="Auto" Width="Auto" Source="/Images/notav.jpg" Margin="0,5,4,4" HorizontalAlignment="Left" />
<TextBlock Text="{Binding PRICE}" TextWrapping="Wrap" Grid.Column="1" Width="350" Foreground="Black" Height="60" Margin="30,85,20,-10"/>
<TextBlock Text="{Binding ITMNAME }" FontSize="22" TextWrapping="Wrap" Grid.Column="1" Name="txtITMNAME" Foreground="DarkBlue" Width="500" Height="130" Margin="30,40,20,-10"/>
<c4f:RoundButton Grid.Column="2" Name="btntick" Click="btntick_Click" Grid.Row="0" FontSize="25" HorizontalAlignment="Right" Background="LightGray" Foreground="DarkGray" Margin="10,20,45,10" />
</Grid>
</Border>
</DataTemplate>
<ListBox Height="Auto" Name="lstbxmanual" ItemTemplate="{StaticResource DataTemplate1 }" Width="475" Margin="4,148,0,5" Background="White" HorizontalAlignment="Left" Grid.RowSpan="2">
</ListBox>
I have to access round button at code behind ,to change its background property...
private void btntick_Click(object sender, RoutedEventArgs e)
{
btntick. //not able to access...
}
I have gone through following stackoverflow questions..
Access DataTemplate controls in code behind
MSDN link
it seems to be not relevant to my requirement..
please help me in this regard...
Solution 1: Use x:Name instead of Name.
Solution 2: Here is the an alternate way too.
You can cast the event sender object:
private void btntick_Click(object sender, RoutedEventArgs e)
{
RoundButton rdbtn = sender as RoundButton;
//rdbtn.BackColor
}
please try, x:Name in place of Name it will be accessible from your code behind file.
<c4f:RoundButton Grid.Column="2" x:Name="btntick" Click="btntick_Click" Grid.Row="0" FontSize="25" HorizontalAlignment="Right" Background="LightGray" Foreground="DarkGray" Margin="10,20,45,10" />
private void btntick_Click(object sender, RoutedEventArgs e)
{
btntick.Foreground = Brushes.Blue;
}
Good Luck.
I have a page with a Pivot. It´s based on the Visual Studio Template.
<!--Pivot Control-->
<phone:Pivot SelectionChanged="evt_pivot_SelectionChanged">
<phone:Pivot.Title>
<StackPanel HorizontalAlignment="Center">
<!-- <TextBlock Text="MyApp" /> -->
<Image Stretch="None" HorizontalAlignment="Left" Margin="0" MinWidth="50" MaxHeight="50" Source="/mAppData/logo.png"/>
</StackPanel>
</phone:Pivot.Title>
<!--Pivot item one-->
<phone:PivotItem Header="Favoriten">
<!--Double line list with text wrapping-->
<phone:LongListSelector Margin="13,0,0,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,25">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Text="FELIX ClubRestaurant (Berlin)" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="110" Height="20" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="http://img.myserver.net/news-teaser//p189j19861b36c5d1pp012i21grgd.gif"/>
<Image Grid.Column="1" Width="100" Height="100" Source="http://img.myserver.net/news-teaser//p187qrndfcj0la0f12clfkv10ec7.gif"/>
<Image Grid.Column="2" Width="100" Height="100" Source="http://img.myserver.net/news-teaser/005e5d03f058fa8f7bd95f6410dfc6d6.gif"/>
<Image Grid.Column="3" Width="100" Height="100" Source="http://img.myserver.net/news-teaser/3c05cbf76fba7ada5182b4426e55d96b.gif"/>
</Grid>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem Header="Empfohlen">
</phone:PivotItem>
</phone:Pivot>
I added in CodeBehind the handling for the event SelectionChanged. That works fine. So I can capture by code, when user comes to the second PivotItem.
private async void evt_pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
int mPivotIndex = Convert.ToInt16(((Pivot)sender).SelectedIndex.ToString());
if (mPivotIndex == 1)
{
// HERE I WANT TO INSERT THE SOLUTION
}
}
Now comes my problem: When user navigates to seconds item, I want to:
request some data from an WebService (this in not the problem)
transform the data (this is not the problem) and
populate the data in a LongListSelector (THIS IS MY PROBLEM PART 1)
In case that an error occures, I want not to display the LongListSelector but a TextBox showing a message (THIS IS MY PROBLEM PART 2)
How can I get my 2 problems get working?
You will need to bind the text/content of your controls in the itemtemplate to the data collection fieldname
Text="{Binding Fieldname}"
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207023(v=vs.105).aspx
In your error handling, set the visibility of the Longlistselector to Collapsed. Then you can show another control which displays the textbox
<StackPanel>
<LongListSelector x:Name=”MyListSelector”>
..stuff
</LongListSelector>
<TextBlock x:Name=”MyError” Visibility=”Collapsed”> </TextBlock>
</StackPanel>
Catch (Exception Ex)
{
MyListSelector.Visibility = Visibility.Collapsed
MyError.Visibility = Visibility.Visible
MyError.Text = Ex.Message;
}
you can hide the Longlist selector and add the Textbox with the Error message directly from the code behind. see the code below.
try
{
//make the service call and do your stuff
}
catch(exception ex)
{
MyListSelector.Visibility = Visibility.Collapsed;
var errorTextBox = new TextBox();
errorTextBox.Text = "some Error has occured";
//add all the properties you want to add for textbox such as color,height,fontsiz ect..
//Name your pivotitem control, say pivotitem1
pivotitem1.Content = errorTextBox;
}
hope this helps.
Note: uncompiled code. pardon compilation errors