问题描述
我有一个包含照片、descbox、detailBtn、hideBtn 的翻转视图.我想如果照片被点击，然后 descbox 和 hideBtn 出现，而 detailBtn 不出现.如果再次点击照片，则 descbox 和 hideBtn 不会出现，而 detailBtn 会出现.或者，如果单击 detailBtn，则出现 descbox 和 hideBtn，而不会出现 detailBtn.如果hideBtn点击，则descbox和hideBtn不出现，而detailBtn出现.
我正在使用以下代码:
private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e){var item = await NatureDataSource.GetItemAsync((String)e.NavigationParameter);var group = await NatureDataSource.GetGroupByItemAsync(item);this.DefaultViewModel["Group"] = group;this.DefaultViewModel["Item"] = item;}公共布尔_IsOn;公共布尔IsOn{得到{返回_IsOn;}放{_IsOn = 值；}}private void photo_Tapped(object sender, TappedRoutedEventArgs e){IsOn = !IsOn;如果 (!IsOn){descbox.Visibility = Visibility.Collapsed;detailBtn.Visibility = Visibility.Visible;hideBtn.Visibility = Visibility.Collapsed;}别的{descbox.Visibility = Visibility.Visible;detailBtn.Visibility = Visibility.Collapsed;hideBtn.Visibility = Visibility.Visible;}}private void detailBtn_Tapped(object sender, TappedRoutedEventArgs e){descbox.Visibility = Visibility.Visible;detailBtn.Visibility = Visibility.Collapsed;hideBtn.Visibility = Visibility.Visible;}但是出现如下错误消息:
XAML:
<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}" Foreground="{x:空}"><FlipView.ItemTemplate><数据模板><Grid x:Name="ContentRoot"><Grid.ChildrenTransitions><过渡集合><EdgeUIThemeTransition Edge="左"/></TransitionCollection></Grid.ChildrenTransitions><ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto><StackPanel Height="325" Width="558"><Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0"/><Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="Collapsed" Margin="0,-120,0,0"><ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible"><StackPanel Width="538"><TextBlock x:Name="desc" Text="{Binding Description}" FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" 高度="自动"/></StackPanel></ScrollViewer></边框><Image x:Name="detailBtn" Source="images/media/arrow_up.png" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Tapped=detailBtn_Tapped"/><Image x:Name="hideBtn" Source="images/media/arrow_down.png" Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility=折叠" Tapped="hideBtn_Tapped"/></StackPanel></ScrollViewer></网格></数据模板></FlipView.ItemTemplate></FlipView>如何处理?
注意:我尝试使用 Flipview 上的照片和描述 中的方式，但是在 windows phone 8.1 上无法使用
您收到错误descbox"，并且其他在当前上下文中不存在，因为它们是 dataTemplate 的 UIElements 部分的名称.dataTemplate 只会在运行时加载.您想要实现的目标可以通过数据绑定和 MVVM 概念来实现，但要简单得多.
我已根据您使用数据绑定在问题中提供的数据为您创建了一个解决方案.我跳过了 MVVM 部分，因为它足够大以供回答.所以开始...
更新后的 XAML
根据您的代码项目，您可以通过为按钮添加DataBinding 来更改一些内容.如下图:
<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}" Foreground="{x:空}"><FlipView.ItemTemplate><数据模板><Grid x:Name="ContentRoot"><Grid.ChildrenTransitions><过渡集合><EdgeUIThemeTransition Edge="左"/></TransitionCollection></Grid.ChildrenTransitions><ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto><StackPanel Height="325" Width="558"><Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0"/><Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Margin="0,-120,0,0"><ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible"><StackPanel Width="538"><TextBlock x:Name="desc" Text="{Binding Description}" FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" 高度="自动"/></StackPanel></ScrollViewer></边框><AppBarButton x:Name="detailBtn" Icon="Upload" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToInverseVisibilityConverter}}" Click="DetailsBtn_Click"/><AppBarButton x:Name="hideBtn" Icon="Download" Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Click="HideBtn_Click"/></StackPanel></ScrollViewer></网格></数据模板></FlipView.ItemTemplate></FlipView>注意:由于页边距不正确，UI 失败，但那是您的代码.尽量不要将 Margins 用于自适应布局.你可以参考我的回答这里了解更多详情.
相同的代码:
我已经更改了触发 Tapped 事件时要执行的操作.出于参考原因，我已将您的代码注释掉.代码变更如下:
private void photo_Tapped(object sender, TappedRoutedEventArgs e){var currentItem = strictFlipview.SelectedItem 作为 WaterfallDataItem;currentItem.IsDataVisible = !currentItem.IsDataVisible;//IsOn = !IsOn;//如果(！IsOn)//{//descbox.Visibility = Visibility.Collapsed;//detailBtn.Visibility = Visibility.Visible;//hideBtn.Visibility = Visibility.Collapsed;//}//别的//{//descbox.Visibility = Visibility.Visible;//detailBtn.Visibility = Visibility.Collapsed;//hideBtn.Visibility = Visibility.Visible;//}}private void DetailsBtn_Click(对象发送者，RoutedEventArgs e){var currentItem = strictFlipview.SelectedItem 作为 WaterfallDataItem;currentItem.IsDescriptionVisible = true;}私人无效 HideBtn_Click(对象发送者，RoutedEventArgs e){var currentItem = strictFlipview.SelectedItem 作为 WaterfallDataItem;currentItem.IsDescriptionVisible = false;}WaterfallDataItem 类更改:
我添加了接口 INotifyPropertyChanged 并添加了两个新属性 IsDataVisible 和 IsDescriptionVisible，它们引发了 PropertyChanged事件以防万一.
公共类 WaterfallDataItem:INotifyPropertyChanged{public WaterfallDataItem(String uniqueId, String title, String imagePath, String description, String content){this.UniqueId = uniqueId;this.Title = 标题；this.Description = 描述；this.ImagePath = imagePath;this.Content = 内容；}公共字符串 UniqueId { get;私人订制；}公共字符串标题{获取；私人订制；}公共字符串 描述 { get;私人订制；}公共字符串 ImagePath { 获取；私人订制；}公共字符串内容{获取；私人订制；}//用于图像点击以显示描述功能private bool isDataVisible;public bool IsDataVisible{得到 { 返回 isDataVisible;}放{isDataVisible = 值；如果(值)IsDescriptionVisible = true;RaisePropertyChanged("IsDataVisible");}}//用于隐藏和显示详细信息面板并基于该隐藏和显示内容private bool isDescriptionVisible;public bool IsDescriptionVisible{得到 { 返回 isDescriptionVisible;}设置 { isDescriptionVisible = 值；RaisePropertyChanged("IsDescriptionVisible");}}//如果这些属性中的任何一个发生更改，则将事件引发到视图公共事件 PropertyChangedEventHandler PropertyChanged；public void RaisePropertyChanged(string propertyName){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}公共覆盖字符串 ToString(){返回 this.Title;}}请注意:PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 仅适用于 Visual Studio 2015 中可用的 C# 6.0.对于任何版本，您都必须使用
if (PropertyChanged != null){PropertyChanged(this, new PropertyChangedEventArgs(propertyName));}因为新的 Null Condition 运算符仅在 C# 6.0 中可用.有关 c# 6.0 新增功能的更多信息，请参阅this>
转换器:
Converter 用于将 true 或 false 值从属性转换为可见性
公共类 boolToVisibilityConverter : IValueConverter{public bool isInverseReq { 获取；放;}公共对象转换(对象值，类型目标类型，对象参数，字符串语言){bool val = (bool) 值；如果(isInverseReq){如果(值)返回 Visibility.Collapsed;别的返回可见性.可见；}别的{如果(值)返回可见性.可见；别的返回 Visibility.Collapsed;}}公共对象 ConvertBack(对象值，类型目标类型，对象参数，字符串语言){抛出新的 NotImplementedException();}}App.xaml
最后，为了使转换器工作，我们需要将转换器添加到 app.xaml 中.修改 Application.Resources 如下:
<local:boolToVisibilityConverter x:Key="boolToVisibilityConverter" isInverseReq="False"/><local:boolToVisibilityConverter x:Key="boolToInverseVisibilityConverter" isInverseReq="True"/></Application.Resources>请注意，所有的类都只是在主项目中创建，没有子文件夹，因此，如果您将类和转换器放在不同的命名空间中，请记住更新 xaml 上的 xmlns: 标记
使您的解决方案有效:
您至少可以更改代码中的一些内容以使其正常工作，我已经在答案中进行了更改.上述更改将使您可以在不大量更改代码的情况下实现功能.如果我遗漏了什么，请告诉我.
I have a flipview containing photo, descbox, detailBtn, hideBtn. I would like if the photo tapped, then descbox and hideBtn appear, while detailBtn not appear. And if the photo tapped again, then descbox and hideBtn not appear, while detailBtn looks.Or if detailBtn clicked, then descbox and hideBtn appear, while detailBtn not appear. And if hideBtn clicked, then descbox and hideBtn not appear, while detailBtn appear.
I'm using the code below:
private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
var item = await NatureDataSource.GetItemAsync((String)e.NavigationParameter);
var group = await NatureDataSource.GetGroupByItemAsync(item);
this.DefaultViewModel["Group"] = group;
this.DefaultViewModel["Item"] = item;
}
public bool _IsOn;
public bool IsOn
{
get
{
return _IsOn;
}
set
{
_IsOn = value;
}
}
private void photo_Tapped(object sender, TappedRoutedEventArgs e)
{
IsOn = !IsOn;
if (!IsOn)
{
descbox.Visibility = Visibility.Collapsed;
detailBtn.Visibility = Visibility.Visible;
hideBtn.Visibility = Visibility.Collapsed;
}
else
{
descbox.Visibility = Visibility.Visible;
detailBtn.Visibility = Visibility.Collapsed;
hideBtn.Visibility = Visibility.Visible;
}
}
private void detailBtn_Tapped(object sender, TappedRoutedEventArgs e)
{
descbox.Visibility = Visibility.Visible;
detailBtn.Visibility = Visibility.Collapsed;
hideBtn.Visibility = Visibility.Visible;
}
but an error message like the following:
XAML:
<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}" Foreground="{x:Null}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid x:Name="ContentRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EdgeUIThemeTransition Edge="Left"/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto">
<StackPanel Height="325" Width="558">
<Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0" />
<Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="Collapsed" Margin="0,-120,0,0">
<ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible">
<StackPanel Width="538">
<TextBlock x:Name="desc" Text="{Binding Description}" FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" Height="auto"/>
</StackPanel>
</ScrollViewer>
</Border>
<Image x:Name="detailBtn" Source="images/media/arrow_up.png" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Tapped="detailBtn_Tapped"/>
<Image x:Name="hideBtn" Source="images/media/arrow_down.png" Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="Collapsed" Tapped="hideBtn_Tapped"/>
</StackPanel>
</ScrollViewer>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
How to handle it?
Note:I tried to use the way in Photo and description on Flipview, but on windows phone 8.1 can not be used
You get the error "descbox" and others don't exist in the current context because they are names of UIElements part of a dataTemplate. The dataTemplate would load only during runtime. The target you want to achieve can be achieved with Data Binding and MVVM concepts far less complexly.
I've created a solution for you based on the data you had provided in the question using Data Binding. I've skipped out the MVVM portion as that is vast enough for an answer. So getting started...
The Updated XAML
based on your code project a few things you could change by putting in the DataBinding for the buttons. like below:
<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}" Foreground="{x:Null}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid x:Name="ContentRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EdgeUIThemeTransition Edge="Left"/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto">
<StackPanel Height="325" Width="558">
<Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0" />
<Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Margin="0,-120,0,0">
<ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible">
<StackPanel Width="538">
<TextBlock x:Name="desc" Text="{Binding Description}" FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" Height="auto"/>
</StackPanel>
</ScrollViewer>
</Border>
<AppBarButton x:Name="detailBtn" Icon="Upload" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToInverseVisibilityConverter}}" Click="DetailsBtn_Click"/>
<AppBarButton x:Name="hideBtn" Icon="Download" Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Click="HideBtn_Click"/>
</StackPanel>
</ScrollViewer>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
Note: There are UI fails as the margins are not correct but then that's your code. Try not using Margins for an adaptable layout. you could refer my answer here for more details.
The Code Behind for the same:
I've changed the what to do when the Tapped Event is fired. I've left your code commented for reference reasons. The changes in the Code are as below:
private void photo_Tapped(object sender, TappedRoutedEventArgs e)
{
var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
currentItem.IsDataVisible = !currentItem.IsDataVisible;
//IsOn = !IsOn;
//if (!IsOn)
//{
// descbox.Visibility = Visibility.Collapsed;
// detailBtn.Visibility = Visibility.Visible;
// hideBtn.Visibility = Visibility.Collapsed;
//}
//else
//{
// descbox.Visibility = Visibility.Visible;
// detailBtn.Visibility = Visibility.Collapsed;
// hideBtn.Visibility = Visibility.Visible;
//}
}
private void DetailsBtn_Click(object sender, RoutedEventArgs e)
{
var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
currentItem.IsDescriptionVisible = true;
}
private void HideBtn_Click(object sender, RoutedEventArgs e)
{
var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
currentItem.IsDescriptionVisible = false;
}
The WaterfallDataItem Class Changes:
I've added the Interface INotifyPropertyChanged and added two new properties IsDataVisible and IsDescriptionVisible which raise the PropertyChanged event incase they are changed.
public class WaterfallDataItem:INotifyPropertyChanged
{
public WaterfallDataItem(String uniqueId, String title, String imagePath, String description, String content)
{
this.UniqueId = uniqueId;
this.Title = title;
this.Description = description;
this.ImagePath = imagePath;
this.Content = content;
}
public string UniqueId { get; private set; }
public string Title { get; private set; }
public string Description { get; private set; }
public string ImagePath { get; private set; }
public string Content { get; private set; }
//for the image tap to show description functionality
private bool isDataVisible;
public bool IsDataVisible
{
get { return isDataVisible; }
set
{
isDataVisible = value;
if (value)
IsDescriptionVisible = true;
RaisePropertyChanged("IsDataVisible");
}
}
//for hide and show the details pannel and hide and show content based on that
private bool isDescriptionVisible;
public bool IsDescriptionVisible
{
get { return isDescriptionVisible; }
set { isDescriptionVisible = value; RaisePropertyChanged("IsDescriptionVisible"); }
}
//raises the event to the view if any of these properties change
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public override string ToString()
{
return this.Title;
}
}
Please Note: The PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); Only works with C# 6.0 which is available in Visual Studio 2015. For any editions you will have to use
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
as the new Null Condition operator is only available in C# 6.0. For more information on What's new in c# 6.0 please refer this
The Converter:
The Converter is used to convert the true or false value from the properties to visibility
public class boolToVisibilityConverter : IValueConverter
{
public bool isInverseReq { get; set; }
public object Convert(object value, Type targetType, object parameter, string language)
{
bool val = (bool)value;
if(isInverseReq)
{
if (val)
return Visibility.Collapsed;
else
return Visibility.Visible;
}
else
{
if (val)
return Visibility.Visible;
else
return Visibility.Collapsed;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
The App.xaml
Finally to make the converter work we need to add the converter to the app.xaml. Modify the Application.Resources like below:
<Application.Resources>
<local:boolToVisibilityConverter x:Key="boolToVisibilityConverter" isInverseReq="False"/>
<local:boolToVisibilityConverter x:Key="boolToInverseVisibilityConverter" isInverseReq="True"/>
</Application.Resources>
Please note all the classes are simply made in the main project no sub folders, So if you place the classes and converters in some different namespace, do remember to update the xmlns: tag on the xaml
Edit: To Make your solution work:
At the bare minimum you could change a few things in your code to make it work, I have made the changes in the answer. The above changes would let you implement the functionality without changing your code very much. Do let me know if there is anything I missed.
这篇关于windows phone 8.1上的flipview错误“当前上下文中不存在名称"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！